3
Posted October 20, 2009 by Spyros in Cascading Style Sheets (CSS)
 
 

How to Create a Flexible Single or Multi Column CSS Layout

three-column-layout
three-column-layout

If you happen to take up website programming and design, there is definately a possibility that you have been puzzled with the standard 3 columned layout creation that bugs most website programmers. The problem with this kind of programming is actually the CSS rendering on the different browsers. Because not all browsers comply with today’s web standards, coders end up creating code that works for some browsers while it has problems on other ones.

While there are quite many resources online that provide you with ready made solutions, as a programmer you most times need to know why things work this way. This is something that the vast majority of good programmers relate to. Sometimes reinventing the wheel allows you not only to use it, but really understand why and how it was created.

Thus, i will be explaining you how to go about creating a 3 column CSS layout that actually works on every website. Please bear in mind that i am definately not a CSS expert, but i’ve done quite a lot of website programming and i tend to use this template quite a lot. Therefore, i thought that it would be a good idea to share it with other people that might be interested.

The Actual CSS Layout

First of all, i have to tell you how this works. I tend to create a basic css file that holds the standard CSS attributes and then just include another file that contains the information about the 3,2 or single layout scheme that i want to create. This way the code is much more versatile and easier to edit. The whole idea of successfully creating such layouts is thinking in boxes. The CSS box model is actually a very easy nicely created one.

The idea of the box model is that everything in a website page is a box. For instance, your browser’s viewport is a box by itself. In html and css design we define a box using the <div></div> element. Div actually does nothing else other than define an area on your viewport that will be used as a box. Using CSS, you dictate these user defined areas to have the attributes that you want them to have.

The 3 Steps to Creating a 3 Columned CSS Layout

Let’s now suppose that we want to create a three columns css layout. In short, these are the 3 logical steps that we need to take :

1. First create a container DIV that will play the role of the whole browser viewport. Actually this is not a step that you do, but i’ve put it here so that you understand that the browser viewport is just another theoretical DIV that you just don’t specify.

2. Then, we create three DIVS inside the previous one. The first one represents the header, the second represents the content and the third represents the footer.

3. Now, the content is the middle part of our website, meaning that the actual content of our website has to consist of 3 columns. To do so, we create three more container DIVS inside the middle DIV that will play the role of the left, center and right part of our content.

Before telling more about how this works in CSS, i have to inform you on the need of using a template system like Smarty. If you are comfortable with template systems, please take a look at this tutorial. What makes Smarty so nice is that you can use it with PHP and CSS in order to create a great system that you can reuse anytime you want. For instance, take a look at how i use this system for my websites. This is the code of the file “main.tpl” that actually does the last step as mentioned right above.


<div id="content">
{if isset($pageLeft)}
<div id="contentLeft">
{include file=$pageLeft}
</div>
{/if}

<div id="contentMiddle">
{include file=$pageMiddle}
</div>

{if isset($pageRight)}
<div id="contentRight">
{include file=$pageRight}
</div>
{/if}
</div>

You see that there is a base container that holds three containers just as mentioned above in step 3. Then, using smarty, you just either specify $pageleft in order to create a left container, pageright for a right one or both. Of course, there is always a middle container. This is essentially creating the middle part of our website that will actually be the website’s contents. Now, i suspect that you have not probably set Smarty up and so i will not be using it through the rest of this post. However, i wanted to show you a small example of how to make it a bit more convenient. Hopefully in a future tutorial i will be presenting the whole Smarty, PHP, CSS template as i use it to create websites.

The Actual CSS Code That Creates a Multi Column Layout

As i already mentioned, i use two css files to create the layout just as i want it to be. The first one is static and is never changed and the other one depends on what layout i want to create. The base css file holds this code :


div#content
{
width: 100%;
}

div#footer
{
clear: both;
width: 100%;
text-align: center;
}

div#header
{
clear: both;
width: 100%;
height: 105px;
padding-bottom: 10px;
}

As you see, this stylizes the three different boxes as mentioned in step 1 of the previous section. The div that holds the content is actually taking up 100% of the browser’s width and this has to be defined so that the browser knows that we occupy its full width on this declaration. Next, the footer clears both sides, meaning that there cannot be any other box of html data on the right or left part of the header. Then, the width is also 100% and we just specify a height and some padding that suits our needs. The last two attributes can be changes according to your needs.

This is the main css file but after that comes the important part. After i include this css file, i also include another one that specifies that columns layout ( that is the content layout). This is divided into 4 different layouts, the NO COLUMNS one, the ONE RIGHT COLUMN one, the ONE LEFT COLUMN one and the RIGHT AND LEFT COLUMNS one.

1. The No Columns Layout ( No columns, just a container that occupies the full width of the page)


div#contentMiddle
{
float: left;
width: 100%;
}

This just defines a middle content DIV only that occupies the whole width of the browser and just floats any left content.

2. The One Right Column Layout ( 2 Columns, one Right and one in the middle that also occupies the left space )


div#contentMiddle
{
float: left;
width: 80%;
}

div#contentRight
{
float: right;
width: 20%;
}

The middle content floats the right container to its left and occupies 80% of the total browser width. The right column occupies 18% of the remaining space and floats any content to its right, thus actually floating the middle content.

3. The One Left Column Layout ( 2 Columns, one Left and one in the middle that also occupies the right space )


div#contentLeft
{
float: left;
width: 20%;
}

div#contentMiddle
{
float: right;
width: 80%;
}

Almost the same as above but now the middle container floats the left container to its right and the left container floats the middle container to its left.

4. The 3 Columns Layout (One Column Right, One Column Left and One in the Middle)

div#contentLeft
{
float: left;
width: 18%;
}

div#contentMiddle
{
float: left;
width: 60%;
}

div#contentRight
{
float: right;
width: 18%;
}

The 3 columns layout is also pretty easy to implement. The middle content takes 60% of the browser width, with the other two columns occupying 18% of the remaining width each. It floats the right content to its left and the right content floats it back. Finally, the left content floats the middle column on its left. Therefore, if you think about it, everything floats something, it’s almost like being on the edge.

Now, only one thing remains and that is actually implementing the CSS design on html files. To conclude this long tutorial i will be giving you an example of usage. You will see that this code actually does what the 3 steps on the section about creating the 3 columns layout refer to :


<div id="header">
<div id="logo"> Your Logo Here</div>
</div>

<div id="content">

<div id="contentLeft">
Left Content Here
</div>

<div id="contentMiddle">
Middle Content Here
</div>

<div id="contentRight">
Right Content Here
</div>

</div>

<div id="footer">
Your Footer Text
</div>

That is all ! I believe that you can go about creating your own CSS layouts using your own touch and feel now that you now the mechanism behind that creation. If you feel that i need to clarify something better or need to ask me anything, as always, please drop a comment and i will help you if i can.


Spyros