Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 5 - Let's reinclude some of the initial elements

After positioning the three key areas we want to recreate the look and feel of the layout as it was initially. We added a background pattern to the Content box. We also added a div box to the left of the Content box (it is visually delimited by the darker background). We will call this Leftbox. You can see how the overlapping of the leftbox and the Content occurs. This is how the layout looks now.

CSS specs for the Leftbox

We have added this leftbox in order to experiment margins and widths as you will see later.

div.leftbox {
position: absolute;
margin: 267px 0px 0px 0px;
width: 199px;
z-index: 2;
}

Variations

In our layout the navigation starts at the very top but your website might not reflect that. In fact, a more common layout is where the Navigation area starts just below the Header image and to the left of the Content box. If that is the case of your website follow the Leftbox closely as it is a perfect substitute for it.

The layout is beginning to look appealing. Now we have to fix the content/leftbox overlapping. We could add an additional left margin of 199px to the Content box in order to make space for the Leftbox to its left. Unfortunately, later, when we apply liquid design, Netscape, Opera and Mozilla will not understand the width and margins of the boxes as Internet Explorer does.

We will aim to making the Content 100% wide but the above mentioned browsers will add a 199px to that width and produce a horizontal scrollbar.

A workaround is to push not the Content box but the actual text inside it to the left by 199px. We have set margins to the text and not the box containing the text. Additional references have been added in order to achieve the desired line height, spacing between paragraphs, colour and size.

h1, h2, h3, p {
margin: 10px 35px 25px 255px;
}

margin: 10px 35px 25px 255px; - Because the Leftbox is 199px wide we applied a 255px left margin (longer than 199px in order to create some space) to all paragraphs and headings.

Important

If the Leftbox elements are included in paragraphs (<p>) make sure to create a unique reference for them. Otherwise they will be 'pushed' to the left along with the paragraphs in the content box and produce a new overlapping.

What we can do is add a special class element for the Leftbox items like below.

p.leftbox {
margin: 0px;
padding: 0px;
}

What we did was overrule the 255px left-margin specified earlier for the <p> tag.

Not bad! We will fix the Header/Navigation overlapping when applying liquid design. And the source code reads as follows

<div class="content">
Content
</div>
<div class="navigation">
Navigation
</div>
<div class="header">
Header image
</div>

Liquid CSS layouts tutorial structure