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:


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!

Sponsors

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>


  

CommentLuv Enabled