Sample Inline-Block Three Column Layout 

<!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>

TrackBack URI

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.