Float-less Layout

From CSS Discuss

Jump to: navigation, search

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>
Personal tools