Saturday, July 4th, 2009

A tableless 2 (fluid) columns layout

by Gabriel on 10/09/08 at 2:29 pm

Save to StumbleUpon Stumble Upon it!     Save to Del.icio.us Save to Del.icio.us    Share on Twitter! Share on Twitter!

Greetings! Subscribe to my RSS feed or get my latest post directly in your mailbox. Thanks for visiting!

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:


Be notified when we have new posts by subscribing to BitRepository RSS Feed.
Support us!Did you like this post?
Please spread the word!		 Save to StumbleUpon  Save to Del.icio.us  Share on Twitter!    

Leave a Comment