0

I have been having problems with CSS and adjusting to all screen sizes. I have come up with 2 possible (not ideal) ways of handling different screen sizes.

First option:

One container to hold all elements inside it and make it absolute position with 100% width

and then each element inside that container is relative position with percentages for top, left, bottom, right.

Second option:

One container to hold all elements inside it and make it relative position with 100% width

and then each element inside that container is absolute position with percentages for top, left, bottom, right.

Is there any other possible solution to different screen handling?

I've tried both and when looking at my website on different computers with different screen sizes, some of the elements are too far down, or too far up.

I would appreciate any tips/help. Thanks!

Alex Ljamin
  • 737
  • 8
  • 31
Andy Chan
  • 93
  • 2
  • 3
  • 9
  • i think you should go with 2nd option, give relative position to container div and give absolute position to inside element. – Jassi Oberoi Mar 31 '12 at 12:01

2 Answers2

1

I say: you don't need all those position's!

I have seen LOADS of webdevelopers that use position: relative; in every single element on a page, whereas it isn't necessary at all! Why don't you drop it? The only basic thing you need is:

html, body, #wrapper {
    width: 100%;
    min-height: 100%;
}

In which #wrapper is your wrapping div. No need for position: relatives on the basic structure. If you need to shift some elements because the lay-out is screwed for a certain resolution, I advise you to use media-queries. Here is the basic background information and here is a good demo/tutorial.

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • Probably don't need #wrapper either. You can use body for that. – Rob Mar 31 '12 at 13:12
  • True, but say he wants to center the #wrapper when the window is >960px (media queries), he will need a wrapper. Better safe than sorry I always say. :) – Bram Vanroy Mar 31 '12 at 15:36
  • You can do that with body, too. – Rob Mar 31 '12 at 18:22
  • How are you gonna fix background images and background colours then if you want multiple? – Bram Vanroy Mar 31 '12 at 18:44
  • 1
    I'm not saying you never need a wrapper. I'm saying many people use a wrapper when the body can do the job. – Rob Mar 31 '12 at 21:22
  • You forgot the semicolon on `min-height: 100%`. – DatEpicCoderGuyWhoPrograms Jun 07 '14 at 00:10
  • 1
    @user3487713 Considering that the semicolon is a seperator between statements, not a closing character, I didn't strictly *forget* it - and the CSS will work fine without it. You are right, though, to assume that it is better practice to use a semicolon on all lines (see [this](http://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block) question). So I have edited my answer accordingly. – Bram Vanroy Jun 07 '14 at 11:08
0

Why dont you use a CSS framework. Twitter-Bootstrap is a front end framework which allows you to scale the size of your front end web UI both up and down, so your website will work intuitively on both desktops and mobile devices.

ConMan
  • 1,642
  • 1
  • 14
  • 22