Float-less Layout
From CSS Discuss
Use position: relative; text-align:right; for the container, position: absolute; left:0 for the left aligned element, and display: inline or inline-block for the right element to emulate floating and create bookends for a masthead while avoiding float bugs
Use display:table for the container div, display:table-row for the parent div, and display:table-cell for the nested divs to create rows and columns in standards compliant browsers. Use the display:table-cell divs as a container to divide a large row into multiple div blocks for any column
Use display:-moz-inline-box; (for Firefox 2) and display:inline-block; for other standards compliant browsers to create rows and columns without floats or display:table. Remember to declare -moz-inline-box; before display:inline-block; to ensure Firefox 3+ uses the latter.
Use display:inline or zoom:1 to create rows and column layouts in IE6 and IE7 since display:table is not supported. Add display:inline in a wrapper class (.ie .side, .ie .main{display: inline;}) or conditional comments to achieve the same effect as the zoom:1 trick without using the IE specific property. Use zoom:1 and height:0 for IE5.
Use matching elements when styling column layouts using inline-block, since mixing adjacent divs with paragraph tags may not work even if they have the same display properties
Use vertical-align:top with display:-moz-inline-box to display content the same way as display:inline-block on other browsers
Use -moz-box-orient:vertical; with display: -moz-inline-box; for Firefox 2 to vertically align multiple block level child elements in the inline box, and make sure a fixed-width block-level element contains any inline content -moz-box-orient:vertical prevents inline text from overflowing the inline-block by truncating it, so make sure any wrapping text is in a fixed-width block container
Use display:block to wrap inline content within -moz-inline-box blocks in order to render layouts in Firefox 2 consistently with inline-block on other browsers.
Use overflow:hidden and a fixed width for blocks within -moz-inline-box to prevent mysterious line wrapping and margin collapsing
If adjacent content overlaps -moz-inline-box blocks, make sure it is inside a block container
If you nest -moz-inline-box columns within a -moz-inline-box container, make sure the -moz-inline-box containers are width:auto or have a block container for their nested elements
Use overflow:visible when using negative vertical margins on -moz-inline-box blocks
If you use overflow:hidden along with -moz-inline-box, set a fixed width for the container
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { height: 100%; }
#header, #footer { position: absolute; }
#container { position: relative; }
#header, #footer { left: 50%; }
#footer { bottom: 0; z-index: 2; }
#header { top: 20px; }
#left_nav, #right_nav, #main, .column { display: -moz-inline-box; -moz-box-orient:vertical; display: inline-block; vertical-align: top; }
#fake_header, #content { margin: 0 auto; overflow: hidden; }
#content { padding-bottom: 60px; }
#footer { padding-top: 15px; }
#footer { margin-left: -498px; }
#main { margin-top: 50px; }
.column { margin-right: 40px; }
#header, #footer, #container, #content, #left_nav, #right_nav, #main, .column { border: 1px solid #000; }
#fake_header { width: 100%; }
#content { min-height: 670px; }
#main { width: 647px; }
#left_nav, #right_nav, .column { width: 160px; }
#footer { height: 46px; }
#footer, #content { width: 996px; }
.ie67 #main, .ie67 #left_nav, .ie67 #right_nav, .ie67 .column { display: inline; vertical-align: top; }
.ie67 #container { height: 100%; }
.ie67 #content { height: 628px; overflow: visible; }
.ie67 .column { margin-top:50px; }
.ie67 .content { padding-bottom: 120px; }
.ie67 .footer { bottom: -1px; }
</style>
</head>
<!--[if lte IE 7]>
<body class="ie67">
<![endif]-->
<![if (!IE) | (gt IE 7 )]>
<body>
<![endif]>
<div id="container">
<div id="fake_header"></div>
<div id="content">
<div id="left_nav">left nav</div>
<div id="main">
<!--Wrapper div for Firefox 2 only-->
<div class="wrapper">
<div class="column">
column
</div>
<div class="column">
column
</div>
</div>
</div>
<div id="right_nav">right nav</div>
</div>
<div id="header">
header
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
