CSS Layouts Without Tables

By Jon Jackson
Tweet
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!

In the introduction to this article we said that Cascading Style Sheets enable us to create attractive websites. A quick
glance at http://www.cssremix.com certainly gives some weight to this argument. Now let's look at how we can
actually implement some different page layouts.
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 (for details on how to do this please refer to this page). 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;
}

CSS Layouts Without Tables

By Jon Jackson

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!

Positioning

The position property is used to define whether a box is absolute, relative, static or fixed:
static is the default value and renders a box in the normal order of things, as they appear in the
HTML.

relative is much like static but the box can be offset from its original position with the

properties top, right,bottom and left.

absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In

this crazy little world, the absolute box can be placed anywhere on the page
using top, right, bottom and left.
fixed behaves like absolute, but it will absolutely position a box in reference to the browser
window as opposed to the web page, so fixed boxes should stay exactly where they are on the
screen even when the page is scrolled.

When we talk of absolutely positioned boxes being placed anywhere on the page, theyre
actually still relatively positioned from the edges of the page. And to add another
backtrack, the page doesnt actually have to be the container - a box will be absolutely

positioned in relation to any non-static positioned containing box. Just ignore that for now,
though

Layout using absolute positioning

You can create a traditional two-column layout with absolute positioning if you have something
like the following HTML:

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo.
Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

Were being old-skool and using div elements so as not to introduce too many new things,
but Sectioning is sexier.
And if you apply the following CSS:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
#content {
margin-left: 200px;
}

You will see that this will set the navigation bar to the left and set the width to 200 pixels.
Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of

the page so all that is needed is to set the left margin of the content area to be equal to the
width of the navigation bar.
How stupidly easy! And you arent limited to this two-column approach. With clever
positioning, you can arrange as many blocks as you like. If you wanted to add a third column,
for example, you could add a navigation2 chunk to the HTML and change the CSS to:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
#content {
margin: 0 200px; /* setting top and bottom margin to 0 and right and left margin
to 200px */
}

The only downside to absolutely positioned boxes is that because they live in a world of their
own, there is no way of accurately determining where they end. If you were to use the
examples above and all of your pages had small navigation bars and large content areas, you
would be okay, but, especially when using relative values for widths and sizes, you often have
to abandon any hope of placing anything, such as a footer, below these boxes. If you wanted
to do such a thing, one way would be to float your chunks, rather than absolutely positioning
them.

Floating
Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.
Floating is normally used to shift around smaller chunks within a page, such as pushing a
navigation link to the right of a container, but it can also be used with bigger chunks, such as
navigation columns.

Using float, you can float: left or float: right.

Working with the same HTML, you could apply the following CSS:

#navigation {
float: left;
width: 200px;
}
#navigation2 {
float: right;
width: 200px;
}
#content {
margin: 0 200px;
}

Then, if you do not want the next box to wrap around the floating objects, you can apply
the clear property:
clear: left will clear left floated boxes
clear: right will clear right floated boxes

clear: both will clear both left and right floated boxes.

So if, for example, you wanted a footer in your page, you could add a chunk of HTML

<div id="footer">
<p>Footer! Hoorah!</p>
</div>

and then add the following CSS:

#footer {
clear: both;
}

And there you have it. A footer that will appear underneath all columns, regardless of the
length of any of them.

This has been a general introduction to positioning and floating, with emphasis on the
larger chunks of a page, but remember, these methods can be applied to any box within

those boxes, too. With a combination of positioning, floating, margins, padding and
borders, you should be able to represent any web design your mischievous little
imagination can conjure. The best way to learn? Tinker! Play! Go!