Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
roostermang
3,822 PointsAfter 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
eck
43,038 PointsIn 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
3,822 PointsThanks 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?
eck
43,038 PointsWell, 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
3,822 PointsWill do cheers Erik :-)