Page Layout

Here you can find some general information about position and floating. The main issue of this article is the larger chunks of a page. However, you can represent any web design with the right combination of positioning, floating, margins, padding and borders.

Layout with CSS is quite easy. It just differ from layout with tables and you should used to it. Look at each part of the page as individual chunk and place these chunks relatively or absolutely to another chunk.

Positioning

The position property defines whether an element is absolute, relative, static or fixed.

static – the default value for elements. It renders the normal position of things, as they appear in the HTML.

relative – similar to static, with the element that can be offset from its original position with the properties top, right, bottom and left.

absolute – pulls an element out of the normal flow of the HTML. Thus, the absolute element can be placed anywhere on the page using top, right, bottom and left.

fixed – much like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page. Thus, fixed elements will stay exactly where they are on the screen even when the page is scrolled. Note that it works in Mozilla and Opera, but it doesn’t work in IE.

Absolute Positioning

A traditional two-column layout with absolute positioning can be created in case 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>

And if you apply the following CSS:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#content {
margin-left: 10em;
}

This sets the navigation bar to the left and the width to 10 em’s. With the absolutely positioned navigation, you need to set the left margin of the content area to be equal to the width of the navigation bar.

You also can arrange as many blocks as you like. For example, if a third column is necessary, you can add a ‘navigation2’ chunk to the HTML and change the CSS to:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}

#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

However, there are drawbacks in absolutely positioned elements. For example, you can’t say for sure where they end. In other words, if you want to place anything below these elements (a footer, for example) you need to float your chunks.

Floating

Floating an element will shift it to the left or right of a line and surround content flowing around it.
As a rule, floating is used to position smaller elements within a page, but it can also be used with bigger chunks (navigation columns).

#navigation {
float: left;
width: 10em;
}

#navigation2 {
float: right;
width: 10em;
}

#content {
margin: 0 10em;
}

Apply the clear property in case you don’t want the next element to wrap around the floating objects.

clear: left – clear left floated elements

clear: right – clear right floated elements

clear: both – clear both left and right floated elements

Add a chunk of HTML with the id ‘footer’ and then add the following CSS if you want a footer to your page:

#footer {
clear: both;
}

In such a way you will have a footer underneath all columns, regardless of the length of any of them.