website using 960.gs what css rule is responsible for divs filling 100% screen width

Question

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

Prescriptible

Answer 1

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.

Experimentalize

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 @ w3schools.com/css/css_intro.asp. – Experimentalize

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 – Prescriptible

Answer 2

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.

Annitaanniversary

Answer 3

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

Riches