HTML and CSS for Multi Column Layouts 1


A simple solution with Faux Columns

Professional web-designs often come along with a so-called multi column layout. Using the table-tags for displaying such a layout is outdated for years since for reasons of accessibility  it is recommended to use the table-tag(s) only for displaying table and not for structuring the design of a website.

In this little workshop I am going to show you how you can manage to realize a multi column layout (in our case three columns) without the obsolete table-construction.

So, lets first think about how we want to structure our website. Lets say we choose to build a website with a header and a footer, of course a part for the main content and two sidebars. One of these sidebars we will use to display our site-navigation, the other sidebar we can use for additional information, links  and other services.

At first we set up a struture for header, footer and content in HTML.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>My MultiColumnLayout</title>
 <style type="text/css">
 body{
 font-family:verdana, arial;
 color:white;
 text-align:center; /*workaround for IE6 for centered page*/
 }

 #container{
 width:960px;
 background-color: grey;
 margin:auto;
 text-align:left;    /*resets workaround for IE6*/
 }

 #header    {
 width:940px;
 height:150px;
 margin: 0px 10px;
 background-color:green;
 }

 #content{
 width:940px;
 min-height:350px;
 margin: 0px 10px;
 }

 #footer    {
 width:940px;
 height:80px;
 margin:0px 10px;
 background-color:blue;
 }
 </style>
 </head>
 <body>
 <div id="container">
 <div id="header">
 This is my header
 </div><!-- header end-->
 <div id="content">
 <div id="sidebar_left">
 This is my left sidebar
 </div><!--sidebar_left end-->
 <div id="mainContent">
 This is my main Content
 </div><!--mainContent end-->
 <div id="sidebar_right">
 This is my right sidebar
 </div><!-- sidebar_right end -->
 </div><!-- content end -->
 <div id="footer">
 This is my footer
 </div><!-- footer end -->
 </div><!-- container end-->
 </body>
</html>

Have a look

I have already added some style-information into this code. In this case I chose to include the style sheet in our HTML-head, of course you can also create a separate style sheet which you can include by using the link-tag :

<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />  

Do not forget to close the link-tag if you want to create a website in valid XHTML!

Now, lets see what this stylesheet is doing to our layout.

Our Elements:

#container
#header
#content
#footer

all contain a background-color definition and a height to give you a visual impression. These selector refer to ID-elements. ID’s are used for elements that are used only once on a single web-page while classes also can be used for several elements on the same page. In CSS ID’s are labelled by # while the label . is used for classes.

The #container-div encloses the divs #header, #content and #footer or the other way around, #header, #content and #footer are nested into the #container-div.

The #container-div is responsible for giving our website a certain background und position. In our case we decided to use a pixel-based width – that means the width is always the same – no matter what the visitors browser-view-port is. Of course you can also define a flexible width depending on the browser-view-port by using percentage-values instead of pixels, but this can cause trouble if you wish to create a multi column layout with different background-colors for you columns. In a later lesson I will show you how to solve problems like these, but for now we will work with this fix-width-layout.

This property and value “margin:auto;” forces the browser to display the web-page (#container) in the middle of the visitors browser-view-port. For elder versions of the Internet Explorer e.i.  margin:auto does not work, therefore we need to include the property “text-align” into the body-selector in our CSS-file. To prevent text-elements from being displayed centered in our page-section we need to reset this property in our #container and define text-align:left;.

Not very difficult so far… Now lets see how to create the famous multi-columns in our layout. For this we need to add some more style-information.

In our HTML-template we have already included the divs #sidebar_left, #mainContent and #sidebar_right, which are nested into our #content-div. Now we will go on and make these three divs display next to each other.

First we need to think about the width of each of our columns. We have a total width of 940px for our #content-div. Lets say our sidebars will get a width of 220px, the left sidebar gets a right margin of 10px and the right sidebar gets a left margin of 10px. All together we now have a width of 440px plus 20px for margins for our sidebars. That means there is a 480px width left for our mainContent. For displaying the columns next to each other we need to float them. Lets define these in our style sheet:

#sidebar_left    {
 width:220px;
 margin-right:10px;
 float:left;
 color: green;
 }

#mainContent    {
 width:480px;
 float:left;
 color:brown;
 }

#sidebar_right    {width:220px;
 margin-left:10px;
 color:navy;
 float:left;
 }

Have a look

Doesn’t look bad that far…

Now, lets see what happens if we have more content than on single line and add some random text-snippets and see what happens:

Have a look

The text flows over our footer – this is not, what we intended to see. Solving this is very simple. You need to clear the floatings of the sidebars and the mainContent by adding the clear-property to our #footer-selector in our style sheet:

#footer    {
 width:940px;
 height:80px;
 margin:0px 10px;
 background-color:blue;
 clear:both;
 }

Alternatively it’s possible to add a specific class for clearing floated divs:

.clearer    {clear:both;}

See, what this brings

Good so far… But now lets try to add some background-colors to our columns. Lets try to make our left sidebar yellow, our mainContent orange and our right sidebar white and add the needed background-color-definition to our columns:

#sidebar_left    {
 width:220px;
 margin-right:10px;
 float:left;
 color: green;
 background-color:yellow;
 }

#mainContent    {
 width:480px;
 float:left;
 color:brown;
 background-color:orange;
 }

#sidebar_right    {width:220px;
 margin-left:10px;
 color:navy;
 float:left;
 background-color:white;
 }

Now it looks like this

Not what we wanted to see…
The most simple way to give our columns different background-colors anyway  the usage of a background-image  that simulates the background-colors for us (Faux Columns). We include this into our #container-div:

#container{
 width:960px;
 margin:auto;
 text-align:left;    /*resets workaround for IE6  */
 background-image:url(bg.gif);
 background-repeat:repeat-y;
 }

The background-image is a graphic of 960px width and 1px height. The vertical repeat of the image suggests different background-colors for each column.

Have a look

This really simple multi column solution works in all common browsers. Enjoy!