CSS CSS Basics Understanding Values and Units Pixel Units

roostermang
roostermang
3,822 Points

After some clarification on the 960px width example

In the video you set that main-header at 960px width. This is obviously relative to the monitor resolution you are working on? If you were displaying this example on an 800px width monitor then the 960px width header element would still look full width and not change is that correct? When you say "it only takes up 960px and not the full browser width" and show it at about 3/4 width is that because the machine you are showing this on has a browser displaying at 1320px width or similar?

3 Answers

Erik Krieg
Erik Krieg
43,037 Points

In the scenario you mention, the 960px header will be larger than the 800px screen, so part of the header will be no be visible. This is because pixel are absolute units, and not relative like percentages.

I made a little demo for you with this codepen. Try resizing the browser window to be smaller than the header's width.

roostermang
roostermang
3,822 Points

Thanks Erik most appreciated! And cheers for showing me codepen looks very useful I have a total use for it :-) Thats the thing with a sites maximum width and the maths of it I need to nail. I guess it is all relative to what the site's maximum width is when you begin building it? Then using % and things like @media to resize correctly for responsive design/different sizes.

My mac's maximum screen width is 1680px. So when I make your div 1660px (shaved 10px off each end) wide in codepen, it fits nicely, but of course on other monitors it can cause display issues (your cutoff example in codepen) and would not look good. At 100% width it is full width on everything and much more flexible. That's what confuses me sometimes as a "base" dimension, what maximum width is most popular for sites at the moment pixel wise?

Erik Krieg
Erik Krieg
43,037 Points

Well, it depends on if you want a fluid layout or just a responsive one. I usually use a "container" class with a max-width somewhere between 1000px and 1200px and a width of 100%. This means that the container is the width of the browser window so long as it is less than the max-width. I would recommend that you take a look at the CSS layout techniques tutorials. They should do a better job explaining layout than I will here :P

roostermang
roostermang
3,822 Points

Will do cheers Erik :-)