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.

You shouldn't be absolutely positioning that many DIVs anyway. CSS is designed to allow you to float/position elements naturally and then using media queries, adjust their size/float/position or hide them entirely. — helion3
– helion3, Commented Feb 1, 2014 at 15:55

maja · Accepted Answer · 2016-11-30 12:12:51Z

13

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/

edited Nov 30, 2016 at 12:12

answered Feb 1, 2014 at 15:56

maja

18.2k18 gold badges85 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maja Over a year ago

If you designed your css correct, and always used %-values, you avoid defining dozens of media-queries. In good designs they are neccessary, yes, but a basic layout, which looks good on nearly every device is also possible without them.

Michael McGinnis Over a year ago

+1 for "I don't understand why you need so much absolute-positioning in responsive design." Responsive design begins with flexible grids, flexible images and media queries.

CatalinBerta Over a year ago

Good answer. Side thought: rqrwd.com So there is an entirely dedicated website for a simple percentage calculation? :)

Collectives™ on Stack Overflow

responsive website design with css absolute positioning

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related