responsive website design with css absolute positioning

css, html

Solution

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/

Problem

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 `div`s any fast way to do this? Editing like 45 of these `div`s will take forever. Im really new to this, any help will be appreciated.

Original source