2 Column web layout using DIV’s and CSS (part 1)

Hello, in this post I’m going to show you some simple HTML and CSS that will create a simple 2 column webpage layout. The layout uses DIV’s and CSS for positioning, it does not use tables as that is not reccomended anymore.

This 2 column layout is pretty simple, it has a header or masthead area at the top, a left column for navigation, a right column for the main content of the page and a footer at the bottom.

This is what the finished layout will look like:

The finished 2 column layout

The layout has a fixed width of 900px, and is pretty easy to customise.

OK, lets get started with the HTML.

First we will create the container DIV’s and the DIV’s for the masthead area, logo and slogan which will be the header.

<div id="container">
<div id="mastHead">
<div id="logo"><img src="images/logo.png" alt="logo" /></div>
<div id="slogan">Your Slogan Goes Here</div>
</div><!--masthead end-->

</div><!--container end-->

Now, just after the <!–masthead end–> we will start the code for the left column inlcuding navigation menu and a content block below the navigation for any other content (kind of like a sidebar). The code for the left column, nav and left sidebar looks like this:

<!--start left column-->
<div id="leftColumn">
<div class="leftNav">
<div class="leftNavTitle">Navigation</div>
<div class="leftNavLinks">
<ul class="lnav">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>

</div>

</div><!--end leftnav-->
<div class="leftBlock">
<div class="leftBlockTitle">Left Block</div>
<div class="leftBlockContent">

</div><!--end leftblockcontent-->

</div><!--end left block-->

</div><!--end left column-->

Notice that the leftNav, leftNavTitle and leftNavLinks have been given class selectors instead of id selectors, this is so that these can be re-used on the same document, for example you might want two navigation menus on the left for different purposes, you can simply re-use the leftNav block and it will have the same styles applied to it, the same goes for leftBlock, leftBlockTitle and leftBlockContent this can be re-used and have the same styles applied because the div’s have class selectors. In short if an element has a class selctor it can be re-used in the same document, if an element has an id selector it can only be used once in the document as id is a unique identifier.

OK, now we will write the tags for the right column which will be the main content of the page:

<!--start right column-->

<div id="rightColumn">
<div id="mainContent">
<h1>Content Title Goes Here</h1>

</div><!--end maincontent-->

</div><!--end rightcolum-->

Notice that inside the rightColumn div is another div called mainContent, basically the rightColumn div is a container for the mainContent div, all your content will go inside the mainContent div.

Finally we will write the tags for the footer:

<!--start footer-->
<div id="footer">
<div id="footerContent">© YourSite.com 2010</div>
</div><!--end footer-->

Again you will notice that the footer div is a container for the footerContent div, the reason I do that is when I am adding padding in the CSS file, I can have more control over the content div’s.

The final HTML code looks like this:

<div id="container">
<div id="mastHead">
<div id="logo"><img src="images/logo.png" alt="logo" /></div>
<div id="slogan">Your Slogan Goes Here</div>
</div><!--masthead end-->

<!--start left column-->
<div id="leftColumn">
<div class="leftNav">
<div class="leftNavTitle">Navigation</div>
<div class="leftNavLinks">
<ul class="lnav">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>

</div>

</div><!--end leftnav-->
<div class="leftBlock">
<div class="leftBlockTitle">Left Block</div>
<div class="leftBlockContent">

</div><!--end leftblockcontent-->

</div><!--end left block-->

</div><!--end left column-->
<!--start right column-->

<div id="rightColumn">
<div id="mainContent">
<h1>Content Title Goes Here</h1>

</div><!--end maincontent-->

</div><!--end rightcolum-->

<!--start footer-->
<div id="footer">
<div id="footerContent">© YourSite.com 2010</div>
</div><!--end footer-->

</div><!--container end-->

In the next part of this tutorial I will go over the CSS that will complete our 2 column layout.