Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Creating more Complex Page Layouts using Nested Tables
by Vecpix.com
Creating Your First CSS Website
by GreyCobra.com
CSS Layout
by Will
Two Column Layout Using CSS and Divider Image
by Sebastian Sulinski
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
HTML and CSS  Home HTML and CSS Tutorials 3 Column Liquid Layout
rss

3 Column Liquid Layout

Author: Joseph Skidmore More by this author

Added: Aug 15, 2006 Rating:  Average Rating: 3.11 Votes: 44 Position: 6991 of 12424Average Rating: 3.11 Votes: 44 Position: 6991 of 12424Average Rating: 3.11 Votes: 44 Position: 6991 of 12424Average Rating: 3.11 Votes: 44 Position: 6991 of 12424Average Rating: 3.11 Votes: 44 Position: 6991 of 12424 Level: Experienced Software:  Dreamweaver

3 Column Liquid LayoutA lot of people have wanted to make 3 column CSS layouts but have always managed to run into problems ... like I did the first time I tried. With this tutorial I hope to show you how you can overcome the problems of liquid layouts to create your very own liquid layout which will fit into the screen of the browser at any resolution.

First off, we are going to create the HTML for a layout which has;

  • A header.
  • Left column.
  • Middle column.
  • Right column.
  • And a footer.

The HTML for this would be;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>3 Column CSS liquid layout.</title>
</head>
<body>

<div id="wrapper">
<div id="header"></div>

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

<div id="footer"></div>
</div>

</body>
</html>

This will give us our basic structure. The next thing we are going to add is our CSS styles;

<style type="text/css">
* {
padding: 0px;
margin: 0px;
}

#wrapper {
width: 100%;
}

#header {
width: 100%;
height: 200px;
background: lightgreen;
}

#left {
width: 20%;
height: 400px;
background: blue;
float: left;
}

#middle {
width: 60%;
height: 400px;
background: orange;
float: left;
left: 20%;
}

#right {
width: 20%;
height: 400px;
background: yellow;
float: left;
left: 80%;
}

#footer {
width: 100%;
height: 100px;
background: green;

clear: both;
}
</style>

The style marked with an asterix simply denotes that all tags within the page will all have their styles padding and margin set to 0px;. The #wrapper is simply a container for the entire site layout.

To view an example of the working 3 column css liquid layout click here.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "3 Column Liquid Layout"