Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Using Floats to Display Columns in Any Order

Problem

You want to develop a system to display content in columns in any order.

Solution

Given the following markup:

<div id="container-outer">
 <div id="container">
  <div id="content" class="column">
   <div class="wrap">
    [...]
   </div>
  </div><!-- /END #content -->

  <div id="navigation" class="column">
   <div class="wrap">
    [...]
   </div>
  </div><!-- /END #navigation -->

  <div id="related-info" class="column">
   <div class="wrap">
    [...]
   </div>
  </div><!-- /END #related-info -->
 </div><!-- /END #container -->
</div><!-- /END #container-outer -->

apply the following CSS rules:

.column {
 float: left;
}

#content {
 margin-left: 20%;
 width: 60%;
}

#navigation {
 margin-left: −80%;
 width: 20%;
}

#related-info {
 width: 19%;
}

/* IEx patches \*/
* html .column {
 display: inline;
}

* html #navigation li {
 height: 1%;
}
/**/

This will yield the basic page layout shown in Figure 11-10, with two narrow, flexible-width sidebars bounding an equally flexible center column.

Basic formatting of page layout

Figure 11-10. Basic formatting of page layout

From this rather bland foundation, you can layer additional CSS on top. Adding the following code to your CSS will yield a design similar to Figure 11-11:

body { font: normal 62.5%/1.7 Verdana, Geneva, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #container:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } #container { ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required