CSS: fluid columnar layout

CSS columnar layouts are generally built using fixed dimensions, just to make sure that browsers will compute the available space correctly. Instead, in this post I'm going to show you how to create a completely fluid columnar layout using percentages. The layout we'll create scales along the browser's window and it can be used in a great variety of scenarios and use cases, including the mobile one. First of all, let's draw our HTML structure:

<div id="content">
  <h1>...</h1>
  <div class="column">...</div>
  <!--other three columns here-->
  <div id="gallery">
    <img src="..." alt="" class="alignleft" />
    <img src="..." alt="" class="alignright" />
  </div>
  <div id="extra">
    <div class="extra">...</div>
    <!--other two extra here-->
  </div>
</div>

Let's start with stylizing the main container and heading:

#content {
 width: 70%;
 margin: 0 auto;
 font-size: 1.2em;
 height: 100%;
 overflow: hidden;
}

#content h1 {
 font: normal 6em "Times New Roman", Times, serif;
 color: #c40;
 margin: 0 0 8px 0;
 padding-bottom: 4px;
 text-align: center;
}

The main container's width has been set to 70% of the browser window. This dimension will scale along with the browser window, either by augmenting or decreasing its width. Now let's move on and style our columns:

#content div.column {
 float: left;
 width: 24%;
}

#content div.column h2,
#content div.column p {
 width: 90%;
 margin: 0 auto;
 padding-bottom: 0.5em;
}

#content div.column h2 {
 font-weight: normal;
 font-size: 1.5em;
 color: #fff;
 text-align: center;
 padding: 5px;
 background: #444;
 margin-bottom: 6px;
}

#content div.column p {
 padding-bottom: 1em;
 line-height: 1.4;
}

Each of the four column has a width that is the 24% of the main container's width. To create some spacing between columns, we've set the width of its child elements to the 90% of the total and centered them using automatic horizontal margins. Now we can add some styles to the gallery element, which contains two images:

#gallery {
 clear: both;
 margin: 0;
 padding: 1.5em 0;
 height: 100%;
 overflow: hidden;
}

#gallery img.alignleft {
 float: left;
 width: 45%;
 padding: 0.3em;
 background: #000;
}

#gallery img.alignright {
 float: right;
 width: 45%;
 padding: 0.3em;
 background: #000;
}

We've cleared this element first because the preceding columns are actually floats. Then we've created two classes for the images. The former makes the first image float to the left, while the latter makes the second image float to the right. Both images have their width set to the 45% of the total available width. Finally, we can style our extra section:

#extra {
 background: #000;
 color: #fff;
 margin: 1em 0;
 height: 100%;
 overflow: hidden;
}

#extra div.extra {
 float: left;
 width: 30%;
 padding: 1em;
}

#extra div.extra p {
 width: 50%;
 margin: 0;
 float: left;
 line-height: 1.4;
}

#extra div.extra img {
 float: right;
 width: 45%;
}

This section contains three sub-containers, each one with a paragraph and an image inside. Each sub-container has a width that is equal to the 30% of the total. In turn, paragraphs have been floated to the left with a width of 50% of their parent's width, while images have been floated to the right with a width of 45% of their parent's width. You can see a demo below. Resize the window to see the scaling effect.

Demo

Live demo