0

I'd like to know if using position:absolute like mentioned in this post: "How to overlay one div over another div" works the same for 3 divs over an other. Is it right to work with a whole absolute page? Can't this cause problems when building a responsive website?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Imnotapotato
  • 5,308
  • 13
  • 80
  • 147

1 Answers1

1

These approaches need not cause problems for responsive design. No more than anything else, at least.

For responsive design, make no assumptions about actual pixel dimensions, except perhaps to indicate breakpoints in your media queries. Another case where pixel values are useful is when making 'hairline' borders. In almost all other cases use relative units such as em, rem, %, vh, vw... It's easier than you might imagine, and only requires a little discipline in the beginning to get your mind in the right place.

Also, make your first design for the smallest screen and work up from there. It's much easier than doing it the other way round.

Final tip: Use box-sizing:border-box. I usually put this under the universal selector, like this:

* {box-sizing:border-box;}

This will include borders and padding in the width and height. It just makes the whole business of using relative values much easier and quite intuitive. Good luck!

brennanyoung
  • 6,243
  • 3
  • 26
  • 44
  • Ok, So it wont be a problem working with only absolute from what I understand? Can you take a look at this post too: http://stackoverflow.com/questions/28296193/how-to-position-a-div-with-a-background-image-over-a-page-with-3-div-parts ? – Imnotapotato Feb 03 '15 at 11:57
  • Absolute positioning with relative units should be fine. You might look at relative positioning some stuff too, so that you don't have to account for all the fine layout details yourself. For example if you want something in the bottom right corner of something which might be in different places, depending on screen size. Let the browser do the hard work instead! – brennanyoung Feb 03 '15 at 12:02
  • The other problem is when you work with % I cant position 3 divs because I have always to give the main div a relative position. How do I solve this? – Imnotapotato Feb 03 '15 at 12:30
  • This last question is difficult to answer, perhaps you could move the content of your other question in here, and add the #main stuff? – brennanyoung Feb 05 '15 at 13:04