tags:

views:

780

answers:

3

Hi I am trying to learn CSS and have been looking at the source of websites to learn how it works in practice. I came across the 960 grid system the other day, and found a really beautiful site design that is using the 960gs framework >> OneHub

At this stage, I don't think it is very wise for me to use a CSS framework until I have a better understanding of CSS. So my question is in regard to how they have achieved a centered content box on the website whith a background that fills to expand to your browser width.

I have firebug installed and I can't figure out why the divs on their site eg. #gutter, #navigation will expand to fill the entire browser width. I don't see how these divs are calculating their width value, because it seems that none of the child elements are large enough or have a rule which would force these divs to become larger.

I don't understand how the width is 100%, I would have expected to see some margin auto rule or width 100% specified somewhere in the CSS but I can't find it. Other websites using the 960gs may be doing the same thing but I just used this site for reference since I think it has a nice design.

I hope my question makes sense and thank you for any help with this

+2  A: 

If you specify no rule for width, the width is by default 100% -- that is, it expands to fill its parent element. In this case, the parent element is the body, which is also the full width of the viewport.

John Feminella
thank you, that really helped!
+6  A: 

DIVs, unstyled, will always fill 100% of the parent element. If that's the body, or another element that fills the browser window, it will fill 100%.

It's called a "block level" element. All block level elements behave this way: div, p, form, ul, etc.

rpflo
I don't know if you're on a mac (probably not) but CSSEdit is an awesome application that has taught many a designer CSS by it's perfect interface. CSS isn't too complicated really, just poke the w3c CSS tutorials @ http://www.w3schools.com/css/css_intro.asp.
rpflo
thank you for your prompt and concise reply!I feel a bit silly because I was overlooking this simple behaviour, it goes to show I still need to do a lot more reading. I wish I had a mac to try CSSEdit too
A: 

With the 960 grid system, when you say entire browser width, you mean 960px. Agree with rpflo, above.

TimDC