Do we really need a #container to center CSS layouts? I think not!
From the very beginning, I was taught that a container div should be used to center layouts. Apparently, the body element can itself be used to center the layout removing the need to use an extra wrapper.
Here is how we currently center layouts:
#container {
width:990px;
margin:0 auto;
}
but the container is not required at all so why use it? Here is how I center layouts:
body {
width:990px;
margin:0 auto;
}
As for the Background image, you can use the “html” element for that.
Check out the working example.
There has to be a valid reason for not using the body tag. Having learnt CSS just a few months back, I am fairly new to the language and might be missing something.
What do you think? Is the #container useless?
Join the discussion! Jump to the comments
11 Interesting Conversations
And how are you going to set backgound for whole page?
Yuriy Voziy
January 11, 2010
@Yuriy I was thinking the same thing, and just tried it out, but it seems to work fine.
Bruce Spang
January 12, 2010
@Yuriy Voziy
I have updated the post to include a working example
kumailht
January 12, 2010
@Kumailht,
html{background:#fafafa url(texture.png);}
Just as I though.
Yuriy Voziy
January 12, 2010
@Yuriy Voziy
Do you understand why this method is not used? I still don’t get it, why the extra div?
kumailht
January 12, 2010
I can understand why this wont be used by CSS frameworks. Because it must be usable in most cases.
When you setup width for tag you can’t add top full-width panels on the top(or bottom) of the page ( eg. Facebook, Google, LiveJournal).
And people are trying to use most common patterns for templating.
Yuriy Voziy
January 12, 2010
@Yuriy Voziy
Your comment almost changed my mind.. until I tried doing it!
Check out the example again, its got a panel too
kumailht
January 12, 2010
@Kumailht, ha tricky. But this is not fair panel
It’s floating to the bottom.
You will always see it regardless scroll
Yuriy Voziy
January 12, 2010
@Yuriy Voziy
Around 1 in 1000 sites probably need the container. The rest just don’t know about this method I guess…
kumailht
January 12, 2010
If you want some div inside the body to span the whole page (width: 100%) then you can’t set a fixed width for body.
Of course, you can use e.g. ‘position:absolute’ and a bunch of other CSS properties, but you’re not making it easy for yourself
A good example are headers and footers on many pages – like on http://stuffandnonsense.co.uk/
Darep
January 13, 2010
@Darep
You are right, layouts with 100% wide div’s need a container but majority of the websites out there dont use 100% divs. Layouts like those are very unconventional.
The problem is not that the method is being used, the problem is that the method is being used when in fact it is not needed at all!
A container tag is like wrapping an UnOrdered List in a Div. Just not right.
Thanks for your comment!
kumailht
January 13, 2010
Websites that link to this post