How to properly float two columns side by side with css

Question

This is one of those things I learned a long time ago and never thought much about if I was actually doing it the right way.

Let\'s say we have a structure

Answer 1

I'm modifying my answer from here: How to make an inline-block element fill the remainder of the line?

• Only #sideBar is floated.
• You can't really tweak this technique to have equal height columns later on, so that's why I asked before answering. (well, you can, but you need to use a background-image for faux columns)

See: http://jsfiddle.net/qx32C/37/

#wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

---

Why did I replace margin-left: 100px with overflow: hidden on #mainContent?