About

CSS (3)

JavaScript (6)

Web browsers (2)

 

Blog

CSS

By popular request, here you will find different examples of how to create column layouts with CSS instead of using a table. There are a myriad ways of doing this, but I think these are simple and efficient enough. I will only show-case the most common scenarios here. An element with the clear style is used to clear the floated elements.

NOTE: If you decide to use padding on any of the columns, the padding will be added to the total width of the element, hence making it wider. Just subtract the left and right padding from the width and you will get the desired effect. However, this will not work as expected in Internet Explorer 5.x (this also applies to Internet Explorer 6 when not using a strict(X)HTML Doctype), because of these versions' incorrect rendering of the box model (read more at MSDN). Instead, those browsers will add the padding within the set width. Use Conditional Comments to include IE-specific CSS and adjust the width accordingly.

Now, just download the CSS file and play around with it! :-)

 

Three column layout, fixed column width in pixels

Just as the title says, each column has a fixed width in pixels.

Left column

This column's CSS:
div#demo-px-left-col{
   float: left;
   width: 184px;
   background: #00FF82;
}

Middle column

This column's CSS:
div#demo-px-middle-col{
   float: left;
   width: 420px;
   background:#CAF;
}

Right column

This column's CSS:
div#demo-px-right-col{
   float: right;
   width: 180px;
   background: #CC0;
}
 

Three column layout, dynamic column width in % (could as easily be done using the em unit instead)

This is a trickier one, and it presented some unexpected behavior to me. In some cases, in Firefox 1.0.4, a 1 pixel wide space is shown in between random columns, although the percentage width add up to a 100%. Rounding bug? When I tested other percentage combinations with a sum of 100%, Internet Explorer chose to push down the right column (even though none of the columns were overflowed with text that might've caused this behavior, and setting overflow:hidden; didn't help either.). Try around for yourself and see!

Left column

This column's CSS:
div#demo-percent-left-col{
	float: left;
	width: 32%;
	background: #00FF82;
}

Middle column

This column's CSS:
div#demo-percent-middle-col{
	float: left;
	width: 35%;
	background:#CCC;
}

Right column

This column's CSS:
div#demo-percent-right-col{
	float: right;
	width: 33%;
	background:#CC0;
}
 

Three column layout, fixed left and right column width in pixels, and adaptive middle column width

The main column's width is adapted to the space given between the flanking, floated columns with a fixed width in pixels. There are three different things to note in this example.

  1. In the source code, the right column is placed before the left and middle one. This is because the middle column would push it down otherwise, since it is not floated.
  2. The middle column's height isn't the same as the width two side columns'. There isn't a way in CSS for an element to alter its height according to another element's height (that is, another element that isn't a parent or child element of the current element). See examples below with absolutely positioned columns and border-based ones.
  3. Look in the CSS for the style rule for the H3 element within the demo-px-left-col element. All H3 elements in the page has a 1 em top and bottom margin, but for the one in the middle column, the top margin has been removed and replaced by a top padding instead. Why? This is because if an element with a margin is the first element in the middle column, that column will not render its background color until it reaches the actual content of the element. This means that the margin part wouldn't get a background color, so therefore, the switch in styles.
 

Right column

This column's CSS:
div#demo-px-right-col{
   float: right;
   width: 180px;
   background: #CC0;
}

Left column

This column's CSS:
div#demo-px-left-col{
   float: left;
   width: 184px;
   background: #00FF82;
}

Middle column

This column's CSS:
div#demo-auto-middle-col{
	margin: 0 auto;
	background:#CAF;
}

 

Two column layout, absolutely positioned columns with equal height

The two columns are absolutely positioned and have a parent element with position:relative to know where the offset starts for setting left and top values. Note that the two columns have an equal height. This is accomplished by setting a background image and height on the containing element/-s, which could be the html and body in a common scenario. Like this:

div#relative-container{
	position: relative;
	height:400px;
	background: url(../images/two-col-bg.png) repeat-y;
}
 

Left column

This column's CSS:
div#demo-abspos-left-col{
  position: absolute;
  left:0;
  top: 0;
  width: 184px;	
}

Right column

This column's CSS:
div#demo-abspos-right-col{
  position: absolute;
  left:194px;
  top: 0;
  width: 590px;
}

A paragraph

A paragraph

A paragraph

A paragraph

 

Three column layout, based on a nifty way of using borders. Also, equal height columns and adaptive middle column width.

And to round this off, here's a different approach using borders and negative margins. This one also succeeds in achieving equal column height. Notice the order of the columns in the HTML code, and also that the border heights are based on the middle column's height. The 1px top border is necessary to keep the side borders in shape. Try to change the size and the color of the top border for some funky effects! Container code:

div#demo-border-container{
	border-left:200px solid #FAA;
	border-right:200px solid #AAF;
	border-top:1px solid #FFF;
}
 

Right column

This column's CSS:
div#demo-border-right-col{
  position: relative;
  z-index: 1;
  float:right;
  /* 
  display:inline needed 
  to cater to the double 
  margin float bug in IE 
  */
  display: inline;
  width:270px;
  margin-right:-270px;
}

Left column

This column's CSS:
div#demo-border-left-col{
  position: relative;
  z-index: 1;
  float:left;
  /* 
  display:inline needed 
  to cater to the double 
  margin float bug in IE 
  */
  display: inline;
  width:200px;
  margin-left:-200px;
}

Middle column

This column's CSS:
div#demo-border-middle-col{
  margin:0 auto;
}

Deep within the jungles of Mexico and Guatemala and extending into the limestone shelf of the Yucatan peninsula lie the mysterious temples and pyramids of the Maya. While Europe was still in the midst of the Dark Ages, these amazing people had mapped the heavens, evolved the only true writing system native to the Americas and were masters of mathematics. They invented the calendars we use today. Without metal tools, beasts of burden or even the wheel they were able to construct vast cities across a huge jungle landscape with an amazing degree of architectural perfection and variety.

Their legacy in stone, which has survived in a spectacular fashion at places such as Palenque, Tikal, Tulum, Chichen Itza, Copan and Uxmal, lives on as do the seven million descendants of the classic Maya civilization.