» Birthday Bundle - Over $400 worth of Envato files for just $20

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:


Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

Get our RSS Feed!

Tags:

Tableless 2 (Fluid) Columns Layout

Related Posts

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)