Cascading Style Sheets (CSS) are the most flexible way to create attractive, standards-compliant websites. Even so, many web designers choose to stick to the original HTML elements that they are familiar with in order to implement their designs. For example, HTML tables are often used in order to create the seemingly complex layouts on some web pages.

This article will simply address the drawbacks of relying too heavily on tables for layout as well as the benefits of Cascading Style Sheets. It will also demonstrate how to implement a couple of page layouts using HTML and Cascading Style Sheets as an alternative to HTML tables.

A Shift Towards Semantic Mark-up

If we look to the World Wide Web Consortium (W3C) for guidelines on how to use HTML properly, the use of semantic mark-up is always strongly recommended. This means that code should be meaningful as well as syntactically correct.

Well formed semantic mark-up offers greater accessibility to users on various platforms (such as mobile devices) and allows for greater flexibility, scalability and performance of your Website and its pages. This is one of the main driving forces behind XHTML.

An example of poor semantic mark-up would be using the following code to represent a sub-heading on an HTML page:

<p><b>Heading</b></p>

Syntactically this is correct. Semantically though, it is a little off the mark. This code represents a paragraph which is in bold type; not a heading. To represent a heading or sub-heading in HTML we can use the heading tags (<h1>, <h2>, <h3> etc…) to surround the heading text.

Relating this idea to HTML tables would mean that tables should only be used for tabular data and not for layouts and positioning. But how can we create a decent page layout without tables? Surely everything will just appear in a single boring column if we don’t use tables.

Cascading Style Sheets (CSS) to the Rescue!

For these examples we are going to use XHTML 1.0 Strict along with an embedded CSS style block. In practice this CSS can be included in a separate css file. The full XHTML and CSS code for each layout can be copied into a single text file and named with the .html extension.

It doesn’t matter whether you use HTML or XHTML as your document type, as long as your mark-up is nice and clean. Validating your code using the W3C validation tools is always a good idea.

3 Column Layout With Header and Footer

The 3 column layout is common these days. The following HTML and CSS enables you to create a flexible 3 column layout with the minimum of fuss. You can see this page layout here.

We’ll start off with the straightforward HTML:

<div id=”wrapper”>
<div id=”header”>Header</div>
<div id=”content”>
<div id=”content-left”></div>
<div id=”content-main”></div>
<div id=”content-right”></div>
</div>
<div id=”footer”></div>
<div id=”bottom”></div>
</div>

These set of divisions give us the fundamental page structure to work from. The divisions have all been given IDs which enable the CSS to refer to each division and style them appropriately. It is worth noting that element IDs must always be unique within a page.

Now let’s have a look at the CSS:

body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}

These first couple of lines in the style sheet specify the font family and size for the document.

#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}

Here, the page width has been specified as 900 pixels. This wrapper division also has padding of 10 pixels and a border of 1 pixel. The total of these values results in the actual width of the page being 922 pixels.

#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
}
#content-main {
margin-left:10px;
width:500px;
}
#content-right {
margin-left:10px;
width:134px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}

Complex Home Page Layout

There comes a time when a more complex page layout is required. Website home pages are a good example of this. The home page of a website often differs in layout from the rest of the site.

The following HTML and CSS is used to create one example of a home page layout. You can see this page layout here. Unlike the 3 column example above, this page layout is a pretty static. The 3 column layout was flexible in the sense that it could expand vertically with varying amounts of content within its divisions.

This home page layout is more rigid and has all its divisions, widths and heights coded into the CSS. This is perfectly acceptable for a page that will only appear once on a website (i.e. as its home page). There is some tricky math involved with this layout as well. You have to be careful in adding all the margins, borders and padding widths that occur across the page in order to gain perfect alignment.

So let’s start off with the HTML again:

<div id=”wrapper”>
<div id=”header”>Header</div>
<div id=”content-box1″><p>Box 1</p></div>
<div id=”content-box2″><p>Box 2</p></div>
<div id=”content-box3″><p>Box 3</p></div>
<div id=”content”>
<div id=”content-left”></div>
<div id=”content-main”></div>
</div>
<div id=”footer”></div>
<div id=”bottom”></div>
</div>

Note that the order of the divisions may not initially make sense. The boxes which ultimately appear below the main content division actually appear above this main content division in the HTML code. This is due to absolute positioning being applied to these box divisions within the CSS.

The CSS code for this example runs as follows:

body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
height:300px;
}
#content-main {
margin-left:10px;
width:666px;
height:150px;
}
#content-box1, #content-box2, #content-box3 {
padding:10px;
border:1px solid #bbb;
position:absolute;
margin-top:190px;
height:120px;
}

The above CSS class applies to all 3 of the box divisions on the page. They are positioned absolutely and then pushed into the correct place by using their margin properties.

 
#content-box1 {
margin-left:212px;
width:200px;
}
#content-box2 {
margin-left:444px;
width:200px;
}
#content-box3 {
margin-left:676px;
width:202px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}

If you don’t understand all of the above code straight away, don’t worry. You can easily save your own version of this code and start fiddling around with it to see what’s what. Experimentation in this manner is one of the best ways to learn.

Conclusion

Using CSS and “semantic” HTML is the only way forward when it comes to professional web page design. Even though dragging yourself away from table-based layouts may be tough to do, there are many benefits to be had.

Hopefully the two page layout examples within this article will give you something to play with and enable you to improve your CSS skills if you are still a beginner. Even if you find CSS and semantic HTML somewhat tiresome initially, I encourage you to persevere and you will gain some rewarding results.

There are plenty of sites out there (especially this one) that can help you learn more about CSS and semantic HTML, so stick with it and learn how you can make the Web a better place!