responsive website design with css absolute positioning

Question

How would I make this css into a responsive website? I figured I have to use.

   @media (min-width: 700px) and (max-width: 1150px) {

    #div{position:absolute;left:149px;top:61px;}

    #div2{position:absolute;left:249px;top:81px;}
   #div2{position:absolute;left:249px;top:81px;}
   #div3{position:absolute;left:279px;top:181px;}
   #div4{position:absolute;left:449px;top:121px;}
    } 

But there are a lot of divs any fast way to do this? Editing like 45 of these divs will take forever. Im really new to this, any help will be appreciated.

Answer 1

To make it responsive, you must not use px-values. Always use %-values instead.

You can use tools like this one http://rqrwd.com/ to calculate px into %-values.

Nevertheless, I don't understand why you need so much absolute-positioning. In responsive-desgin, the container should 'float' - Absolute positioning (even with %-values) makes that impossible.

but there are alot of divs any fast way to do this?

You don't have to write the design for each div. Furthermore, I think your syntax #div is not ideal - div2 and div3 have the exact same layout - use a class instead!

To apply css-styles to all divs:

div {
   width: 40%
}

To apply a syntax to only one container:

HTML: <div id='unique'>content</div>

#unique {
   width: 40%
}

To apply a syntax to several containers (but not all):

HTML: <div class='flat'>content</div><div class='flat'>content</div>

.flat {
   width: 40%
}

or

#div2, #div3, .flat {
   width: 40%
}

You should probably take a look at this short css-introduction: http://www.cssbasics.com/introduction-to-css/