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