02月 2010

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id=”floater”>
<div id=”content”>
Content here
</div>
</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

THE GOODS

Works in all browsers
When there isn’t enough space (ie. the window shrinks) our content will not be cut off, and [...]