Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 4 - Let's create the CSS layout

First of all we will create three div boxes corresponding to the three key areas:

<div>
Content
</div>
<div>
Navigation
</div>
<div>
Header image
</div>

You can copy the code exactly as it appears above and start from there.

Visually (and simplified) the output at this point looks like below. We kept some of the text formatting such as paragraphs, headings and links but reduced the content. The image below is what corresponds to the simplified code I provided above.

Not very appealing is it? The Content area is represented by the text, followed by the Navigation and Header at last. No absolute positioning is applied at this point.

While bearing in mind how the site looked originally let's apply some CSS to each of the three div boxes. All CSS references will be included in an external style sheet and to each of the three boxes will be applied a 'class' reference.

In order to be able to position the elements and keep the look and feel of the layout as it was we need some information from the original layout:

Width of the Content area 749px
Width of Navigation area 229px
Width of Header Image 520px
Height of Header Image and Navigation 267px

This information will help us set the right margins for each of the 3 key areas so that they keep their appearance.

The content box. (<div class="content">)

The style sheet reference for the Content box is as follows

div.content {
position: absolute;
margin: 267px 0px 0px 0px;
width: 749px;
z-index: 1;
}

position: absolute; - The box is positioned absolutely to the "edges" of the document. All margins are set in relation to the top, right, bottom and left of the page (clock-wise order)

margin: 267px 0px 0px 0px; - The box is positioned 267px from the top and 0px from the other three edges.

width: 749px; - We want the entire Content box to keep its 749px width.

z-index: 1; - Sets the stack order of the div boxes. The Content box is set to be positioned underneath any other box with a higher z-index. We will experiment with that later.

The result

You can clearly see the Content box (surrounded by thick black border) overlapping the header. While the Content box is positioned absolutely (267px from the top), the other two are not (at least not yet).

Important

It is useful to try to ignore all the other div boxes which haven't yet been absolutely positioned. Although they appear to be positioned in some way they are not. As soon as the first key area (Content in our case) is positioned absolutely, the following (Navigation in our case) behaves as if it's the first element in the source code and positions itself adjacent to the top edge. As soon as Navigation is absolutely position, the Header area will behave exactly the same as you see below. As a consequence make an effort to analyse and follow only those div boxes which have already been absolutely positioned. It will simplify things.

The header image box. (<div class="header">)

The style sheet reference for the header box is as follows

div.header {
position: absolute;
margin: 0px;
padding: 0px;
width: 520px;
height: 267px;
z-index: 2;
}

position: absolute; - Same as the content box, the Header box will be positioned absolutely.

margin: 0px; - We want the header box to start from the very top and the very left of the screen.

width: 520px; height: 267px; - The width and height of the box should correspond to those of the image.

z-index: 2; - The stack order is set to prevent a possible overlapping. This way the image will be 'on top' of the Content box should they overlap.

The result

Still not much better but let's not give up hope. The header image has got a thick black border and is overlapping the Content box because of the stack order we have set.

The navigation box. (<div class="navigation">)

Because the navigation will be parallel to the header image we need to include some similar reference to the ones in the Header box

div.navigation {
position: absolute;
margin: 0px;<
width: 229px;
height: 267px;
z-index: 3;
}

position: absolute; - Again, the box is positioned absolutely

margin: 0px; - We want the navigation box to start from the very top and the very left of the screen.

width: 229px; height: 267px; - Width and height of the navigation box.

z-index: 3; - Because the Header and Navigation boxes will overlap we want the Navigation to be on top.

The result

We've added a bit more text and a background for the Content box and the layout looks like this:

You can see that the Header box is partially overlapped by the Navigation box.

Liquid CSS layouts tutorial structure

Back to Website Builder Tips: Making A Web Site Accessible

Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 4 - Let's create the CSS layout

The content box. (<div class="content">)

Important

The header image box. (<div class="header">)

The navigation box. (<div class="navigation">)

Liquid CSS layouts tutorial structure

Other Accessible Web Design articles