Question

I have the following code at http://jsfiddle.net/qPtXL/

As you can see the problem is the #footer does not sit below the #contents if the .body text is not longer than the .sidebar. The .sidebar is absolute positioned and the .body has a margin left so I don’t use any floats to keep the .body width variable.

Does anyone have a suggestion as to how I can make the #footer sit below the #contents if this situation?

Answer 1

usually, this is easy done like this: http://jsfiddle.net/qPtXL/4/

parent: overflow: hidden
left: float: left
content: overflow: hidden

no noob’s display: table-cell and etc 😉

absolute position takes elements away from flow. this is like new independent layer in photoshop. the only thing u can do is to set it’s position and height\width relative to the closest parent with position: relative

IE6:

http://jsfiddle.net/qPtXL/10/