HTML, XHTML CSS Tutorials and Free Website Templates
CSS Layout Tutorial
In this tutorial, I will guide you through the process of how to create a simple CSS based website layout with the use of
the float property. It will have a header, left hand column, right hand column and a footer.
The layout will contain 5 divs. Each div will be given a unique ID. The divs are labeled : wrap (given to the div that will
wrap around the contents of the web page), header (header), content (the left and right divs will be placed within this div),
left (left hand column), right (right hand column) and footer (footer). The name of the divs can be whatever you like.
I have also added some CSS styles formatting and some text to the content area of web page including a border around each div
so that you can easily the placement of the divs.
Step 1: Beginning Code
The HTML and CSS code so far is shown below.
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:0; padding:0; color:#000; background:#fff; }
#wrap
{
border:1px solid #000;
}
#header
{
border:1px solid #000;
}
#content
{
border:1px solid #000;
}
#left
{
border:1px solid #000;
}
#right
{
border:1px solid #000;
}
#footer
{
border:1px solid #000;
}
</style>
<body>
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div><!-- end id header -->
<div id="content">
<div id="left">
<h1>Left Column</h1>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
</div><!-- end id left -->
<div id="right">
<h1>Right Column</h1>
<p>
This is the right column.
</p>
<p>
This is the right column.
</p>
<p>
This is the right column.
</p>
<p>
This is the right column.
</p>
<p>
This is the right column.
</p>
</div><!-- end id right -->
</div><!-- end id content -->
<div id="footer">
<p>
This is the footer.
</p>
</div><!-- end id footer -->
</div><!-- end id wrap -->
</body>
</html>
The web page that the code example creates is here: CSS Layout Tutorial Example.
Step 2: Center Content
For this layout I want to have the content be centered. To do this, I will set the width and margins of the div with the
id name of wrap, because that is the div that wraps around the rest of the content.
I will give the div a width of 700 pixels. You can set the width to any length that you want, including 100%. Making
the width of the div 100% will make the content of the web page fill the width of the web browser window, moving
the content of the web page to the edges of the web browser window.
To center the div within the web browser window, apply an attribute of "auto" to the left and right margins.
The code below shows you how to apply an attribute of auto to the left and right margins to the div.
The code below specifies that the div with the name of wrap will have a top and bottom margin of 0 and the contents of the
web page will centered by making the left and right margins of equal lenght.
#wrap { margin:0 auto; }
You can also specify the top and bottom margins individually while still centering the content.
The code below specifies the the top margin will be 5 pixels, the bottom margin will be 10 pixels and the left and right
margins will be given an attribute of auto, which will center the content on the web page.
#wrap { margin:5px auto 10px auto; }
The code for the layout so far is shown below.
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:0; padding:0; color:#000; background:#fff; }
#wrap
{
width:700px;
margin:0 auto;
border:1px solid #000;
}
#header
{
border:1px solid #000;
}
#content
{
border:1px solid #000;
}
#left
{
border:1px solid #000;
}
#right
{
border:1px solid #000;
}
#footer
{
border:1px solid #000;
}
</style>
<body>
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div><!-- end id header -->
<div id="content">
<h1>Content</h1>
<div id="left">
<h1>Left Column</h1>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
</div><!-- end id left -->
<div id="right">
<h1>Right Column</h1>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
</div><!-- end id right -->
</div><!-- end id content -->
<div id="footer">
<p>
This is the footer.
</p>
</div><!-- end id footer -->
</div><!-- end id wrap -->
</body>
</html>
The web page that the code example creates is here: CSS Layout Tutorial Example.
Step 3: Apply Width to All divs
Next, I will give all of the divs within the div with the name of wrap. The header, content and footer divs will be given a
width of 700 pixels. The left and right divs will have a combined width of less than 700 pixels because they will both
be placed within the content div.
The code for the layout so far is shown below.
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:0; padding:0; color:#000; background:#fff; }
#wrap
{
width:700px;
margin:0 auto;
border:1px solid #000;
}
#header
{
width:700px;
border:1px solid #000;
}
#content
{
width:700px;
border:1px solid #000;
}
#left
{
width:490px;
border:1px solid #000;
}
#right
{
width:200px;
border:1px solid #000;
}
#footer
{
width:700px;
border:1px solid #000;
}
</style>
<body>
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div><!-- end id header -->
<div id="content">
<h1>Content</h1>
<div id="left">
<h1>Left Column</h1>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
</div><!-- end id left -->
<div id="right">
<h1>Right Column</h1>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
</div><!-- end id right -->
</div><!-- end id content -->
<div id="footer">
<p>
This is the footer.
</p>
</div><!-- end id footer -->
</div><!-- end id wrap -->
</body>
</html>
The web page that the code example creates is here: CSS Layout Tutorial Example.
Applying the float property to the left and right divs
Next, because I want the left hand colum and the right hand column to be placed side by side within the content div,
I will apply the float property to the left and right divs.
The left div will have the float property with a value of left to have the div float to the left. The right div will
have the float property with a value of right to have the div float to the right.
The code for the layout so far is shown below.
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:0; padding:0; color:#000; background:#fff; }
#wrap
{
width:700px;
margin:0 auto;
border:1px solid #000;
}
#header
{
width:700px;
border:1px solid #000;
}
#content
{
width:700px;
border:1px solid #000;
}
#left
{
float:left;
width:490px;
border:1px solid #000;
}
#right
{
float:right;
width:200px;
border:1px solid #000;
}
#footer
{
width:700px;
border:1px solid #000;
}
</style>
<body>
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div><!-- end id header -->
<div id="content">
<h1>Content</h1>
<div id="left">
<h1>Left Column</h1>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
</div><!-- end id left -->
<div id="right">
<h1>Right Column</h1>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
</div><!-- end id right -->
</div><!-- end id content -->
<div id="footer">
<p>
This is the footer.
</p>
</div><!-- end id footer -->
</div><!-- end id wrap -->
</body>
</html>
The web page that the code example creates is here: CSS Layout Tutorial Example.
Step 5: Adding the clear property to the footer
Finally, I will apply the clear property with an attribute of "both" to the footer div. This will cause the footer div
to be pushed below both the left and right divs on all web browsers.
The code for the final layout so far is shown below.
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:0; padding:0; color:#000; background:#fff; }
#wrap
{
width:700px;
margin:0 auto;
border:1px solid #000;
}
#header
{
width:700px;
border:1px solid #000;
}
#content
{
width:700px;
border:1px solid #000;
}
#left
{
float:left;
width:490px;
border:1px solid #000;
}
#right
{
float:right;
width:200px;
border:1px solid #000;
}
#footer
{
clear:both;
width:700px;
border:1px solid #000;
}
</style>
<body>
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div><!-- end id header -->
<div id="content">
<h1>Content</h1>
<div id="left">
<h1>Left Column</h1>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
<p>
This is the left column.
</p>
</div><!-- end id left -->
<div id="right">
<h1>Right Column</h1>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
<p>
This is the righ column.
</p>
</div><!-- end id right -->
</div><!-- end id content -->
<div id="footer">
<p>
This is the footer.
</p>
</div><!-- end id footer -->
</div><!-- end id wrap -->
</body>
</html>
The web page that the code example creates is here: CSS Layout Tutorial Example.
