I need to make quite a simple two column layout and I’m wondering if I should use a container or not. Like I said it is a two column layout floating all the way to the far left (no center layout). The left column is the menu and should have a height of 100%. The right column holds the actual content and don’t need to have a 100% height, but instead will grow depending on the content. What would you guys and girls suggest I should do. Two separate columns both floating to the left, or wrap the two columns in a container? What is the advantage of one of those two?
If all you have is two columns then there is no real need for a wrapper.
You can’t however set the left column to height :100% because that makes no sense even if you use min-height:100% as height:100% would stop the element from going past the viewport. As both columns are independent then the left column will never stretch with the right column as they have no relationship with each other.
If you want a left column that keeps track with the right column then use the faux column approach using a repeating background image but then of course you will need a wrapper to hold both columns on to which to apply the image. This wrapper would use the 100% height method shown in the CSS faq (see my sig). There are other methods of equal columns without using images but are a little more involved.
I think in this case, you COULD use the BODY tag as the container. Anything else could be placed in the HTML tag. Thus you could still get equal height columns w/o a container, IF all your layout requires is 2 columns.
I’d include the wrapper just since if you are going to have multiple media targets, it helps to have an outermost container to set things like max-width or min-width on. It’s also handy to have it there for float clearing without clearing div’s, clearfix, or any of the rest of that asshattery… and it’s a hook for doing 100% min-height layouts as well.