It's Easy to Build a CSS Web Page - No Tables Required
You may be surprised to learn how easy it is to create a CSS layout for a Web page and not need any tables. By using CSS instead of tables, you create a Web page that is easier to find in search engines, easier to maintain over time, easier for your customers to download without waiting, and easier to redesign later when you want a new layout.
Step 1: Write Your Content
Yes, Write Your Content First
Many people think that they should start building a Web page design by working first on the layout. But it is a lot harder to build a layout if you don't know what's going to go onto the page. So the first thing to do is write some content.
The content that you write doesn't have to be exactly what will be on the live site. You can use placeholder text, but make sure that you have all the parts of your page. Such as:
- navigation
- main content
- sub-content
- ownership information
- etc.
Step 2: Section Out Your Content and Give the Sections Names
When you're building CSS layouts, you need to think of each part of the layout as a block or section. Blocks are rectangular in shape and take up space in the layout. The most common HTML tags used to define sections are:
Chances are, you already have one or two of these tags in your HTML content. If they define a section or block of your content, then you don't need any extra HTML for your layout.
For example, navigation is often written in an unordered list <ul>. If yours is, then you can use that tag as your section.
If a section doesn't have one tag that surrounds the entire thing, like a navigation list, then you'll need to add divisions. Surround each section with a <div> element. Be sure to close the </div> at the end of each section.
Finally, give each section a name. Use the id attribute on your <div> or other block tags to give each block of your layout a separate name. For example:
<ul id="navigation"> ...
<div id="main"> ...
<p id="subsection"> ...
Chances are, you already have one or two of these tags in your HTML content. If they define a section or block of your content, then you don't need any extra HTML for your layout.
For example, navigation is often written in an unordered list <ul>. If yours is, then you can use that tag as your section.
If a section doesn't have one tag that surrounds the entire thing, like a navigation list, then you'll need to add divisions. Surround each section with a <div> element. Be sure to close the </div> at the end of each section.
Finally, give each section a name. Use the id attribute on your <div> or other block tags to give each block of your layout a separate name. For example:
<ul id="navigation"> ...
<div id="main"> ...
<p id="subsection"> ...
Step 3: Use CSS to Float Each Section
Set a width and then float the elements
The CSS float property is one of the most useful properties for writing standards-based Web layouts. When you float an element, you tell the browser to move it over to one side or the other of the Web page, and all other content flows around it. This works well for layout as you don't have to define exactly where the element will go, just how wide it is.
Define the width (and height if you like) of the element with your CSS:
#navigation {
width: 100%;
height: 1em;
}
#main {
width: 500px;
}
#subsection {
width: 200px;
}
Once everything has a width defined, you should then float all the elements:
#navigation {
width: 100%;
height: 1em;
float: left;
}
#main {
width: 500px;
float: left;
}
#subsection {
width: 200px;
float: right;
}
The last thing I did was add a container around all the HTML, so that the page was not wider than I wanted it to be. I named this container "container" and styled it with a width of 750px;
<div id="container"> ...
#container { width: 750px; }
Define the width (and height if you like) of the element with your CSS:
#navigation {
width: 100%;
height: 1em;
}
#main {
width: 500px;
}
#subsection {
width: 200px;
}
Once everything has a width defined, you should then float all the elements:
#navigation {
width: 100%;
height: 1em;
float: left;
}
#main {
width: 500px;
float: left;
}
#subsection {
width: 200px;
float: right;
}
The last thing I did was add a container around all the HTML, so that the page was not wider than I wanted it to be. I named this container "container" and styled it with a width of 750px;
<div id="container"> ...
#container { width: 750px; }
View the HTML and CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Simple CSS Layout</title>
<style type="text/css">
#container { width: 750px; }
#navigation {
width: 100%;
height: 1em;
float: left;
}
#navigation li { display: inline; }
#navigation li a {
padding: .25em 1em;
float: left;
}
#main {
width: 500px;
float: left;
}
#subsection {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="container">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Stuff</a></li>
</ul>
<div id="main">
<p>Duis aute irure dolor ullamco laboris nisi in reprehenderit in voluptate.
Ut labore et dolore magna aliqua. Quis nostrud exercitation sed do eiusmod
tempor incididunt ut enim ad minim veniam. Duis aute irure dolor eu fugiat
nulla pariatur. In reprehenderit in voluptate mollit anim id est laborum.</p>
<p>Cupidatat non proident, velit esse cillum dolore ut enim ad minim
veniam.
Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Ut labore
et dolore magna aliqua. In reprehenderit in voluptate ut enim ad minim veniam,
consectetur adipisicing elit. Qui officia deserunt eu fugiat nulla pariatur.</p>
<p>Sunt in culpa quis nostrud exercitation sed do eiusmod tempor incididunt.
In reprehenderit in voluptate ut enim ad minim veniam, mollit anim id est
laborum. Ullamco laboris nisi lorem ipsum dolor sit amet, quis nostrud exercitation.
Sunt in culpa qui officia deserunt. Consectetur adipisicing elit, lorem ipsum
dolor sit amet, ut enim ad minim veniam.</p>
<p>Sunt in culpa velit esse cillum dolore qui officia deserunt. Eu fugiat
nulla
pariatur. Excepteur sint occaecat lorem ipsum dolor sit amet, sunt in culpa.
Velit esse cillum dolore quis nostrud exercitation duis aute irure dolor.
Ut enim ad minim veniam, excepteur sint occaecat sunt in culpa.</p>
<p>In reprehenderit in voluptate. Quis nostrud exercitation ut labore
et dolore
magna aliqua. Excepteur sint occaecat lorem ipsum dolor sit amet, cupidatat
non proident. Qui officia deserunt quis nostrud exercitation velit esse cillum
dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
</div>
<div id="subsection">
<p>Omnis dolor repellendus. Et quasi architecto beatae vitae consectetur,
adipisci
velit, quis autem vel eum iure reprehenderit. Velit esse quam nihil molestiae
consequatur, id est laborum et dolorum fuga.</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Simple CSS Layout</title>
<style type="text/css">
#container { width: 750px; }
#navigation {
width: 100%;
height: 1em;
float: left;
}
#navigation li { display: inline; }
#navigation li a {
padding: .25em 1em;
float: left;
}
#main {
width: 500px;
float: left;
}
#subsection {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="container">
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Stuff</a></li>
</ul>
<div id="main">
<p>Duis aute irure dolor ullamco laboris nisi in reprehenderit in voluptate.
Ut labore et dolore magna aliqua. Quis nostrud exercitation sed do eiusmod
tempor incididunt ut enim ad minim veniam. Duis aute irure dolor eu fugiat
nulla pariatur. In reprehenderit in voluptate mollit anim id est laborum.</p>
<p>Cupidatat non proident, velit esse cillum dolore ut enim ad minim
veniam.
Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Ut labore
et dolore magna aliqua. In reprehenderit in voluptate ut enim ad minim veniam,
consectetur adipisicing elit. Qui officia deserunt eu fugiat nulla pariatur.</p>
<p>Sunt in culpa quis nostrud exercitation sed do eiusmod tempor incididunt.
In reprehenderit in voluptate ut enim ad minim veniam, mollit anim id est
laborum. Ullamco laboris nisi lorem ipsum dolor sit amet, quis nostrud exercitation.
Sunt in culpa qui officia deserunt. Consectetur adipisicing elit, lorem ipsum
dolor sit amet, ut enim ad minim veniam.</p>
<p>Sunt in culpa velit esse cillum dolore qui officia deserunt. Eu fugiat
nulla
pariatur. Excepteur sint occaecat lorem ipsum dolor sit amet, sunt in culpa.
Velit esse cillum dolore quis nostrud exercitation duis aute irure dolor.
Ut enim ad minim veniam, excepteur sint occaecat sunt in culpa.</p>
<p>In reprehenderit in voluptate. Quis nostrud exercitation ut labore
et dolore
magna aliqua. Excepteur sint occaecat lorem ipsum dolor sit amet, cupidatat
non proident. Qui officia deserunt quis nostrud exercitation velit esse cillum
dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
</div>
<div id="subsection">
<p>Omnis dolor repellendus. Et quasi architecto beatae vitae consectetur,
adipisci
velit, quis autem vel eum iure reprehenderit. Velit esse quam nihil molestiae
consequatur, id est laborum et dolorum fuga.</p>
</div>
</div>
</body>
</html>
What's New at About Web Design / HTML
Fetching RSS feed... please stand byDo You Use CSS for Layout?
Why do you use tables or CSS for layout? Do you have a preference or does it depend upon the site?
Follow Me on Twitter
More HTML and CSS tips all the time - and more
Tweet About HTML and CSS
powered by Twitter
