A tableless 2 (fluid) columns layout

Posted on September 10, 2008, Filled under HTML & CSS, Bookmark it

This is a simple tableless layout that uses DIVs having 2 (fluid) columns, a header & a footer.

layout-style.css – CSS File

body
{
margin: 0px;
padding: 0px;
background-color: white;
}

#main_wrapper
{
width: 900px;
height: auto;
}

#top
{
height: 80px;
background-color: #FFFFDF;
margin-bottom: 10px;
}

#left
{
float: left;
width: 200px;
background-color: #BED3C4;
}

#content
{
float: right;
width: 690px;
background-color: #E0F0FB;
}

#bottom
{
margin-top: 10px;
width: 900px;
height: 30px;
background-color: #F9E8F8;
}

.clear
{
clear: both;
}

layout.html – The actual page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>2 Columns Layout</TITLE>
  <META name="Author" Content="Bit Repository">

  <META name="Keywords" Content="columns, css, layout">
  <META name="Description" Content="A 2 columns layout">

<LINK REL="stylesheet" HREF="layout-style.css" TYPE="text/css">

</HEAD>

 <BODY>

<center>

<div id="main_wrapper">
<div id="top">Welcome to my WebSite<br /><br />my header text here my header text here
my header text here my header text here.</div>

<div id="content_wrapper">

<div id="left">my text here my text here my text here my text here my text
here my text here my text here my text here my text here. </div>

<div id="content">my text here my text here my text here my text here my text here
my text here my text here my text here my text here my text here my text here my text
here my text here my text here my text here</div>

</div>

<div class="clear"></div>

<div id="bottom">Copyright &copy; MySite.com<br />My footer text here My footer text here
My footer text here My footer text here My footer text here My footer text here
My footer text here My footer text here My footer text here </div>

</div>

</center>

 </BODY>
</HTML>

Our sample output will look like this: