There is so much more to this subject than d8uv's writeup suggests. While understanding the difference beween absolute and relative positioning is important, as is the importance of the positioning attributes of top, left, and so on, one may also employ the power of such things as float and clear to whip out some nice layouts. In my example, I will show how to do a standard three column layout using only CSS.
First, let's start with the basic structure of our page. We will identify our blocks with <div> tags and give them an id attribute. See below:
<html>
<head><title>Some title</title></head>
<body>
<div id="rightbar">Text in the right sidebar.</div>
<div id="leftbar">Text in the left sidebar.</div>
<div id="middle">Text in the middle.</div>
</body></html>
As you can see, the
HTML is pretty clean because I haven't put any style information in it. All there is in the
document is the
structure.
CSS provides the
look
and feel. For my three column layout, I am going to use the following
stylesheet:
div#rightbar { width: 150px;
right: 2%;
position: absolute; }
div#leftbar { width: 150px;
left: 10px;
position: absolute;
float: left; }
div#middle { margin: 0 151px 0 151px;
padding: 0 10px 10px; }
Inserting this into or linking it to our page does a couple interesting things. First, the right bar is 150
pixels wide and positioned 2% from the right hand side of the browser screen
absolutely, which means that no matter what the
resolution of the monitor or how big the browser window is, that bar's rightmost edge is always going to be 2% from the right edge of the
browser window. The left bar, as you might be able to guess, is going to be 10 pixels from the left side no matter what. (I did width value as a percentage and the other as pixels just to show that you can do it either way.) What's interesting about the left bar's style is that I added the
float attribute. That keeps the box on the left of the main area instead of appearing above or below it. So now we have these bars on the
right and
left. In the middle we have our main section. All it is is a big box stretching from edge to edge. Won't the boxes cover up the text? No. The margin attribute sets the right and left margins to 151 pixels, or one pixel larger than the boxes on either side. No matter how the browser window is shaped or sized, this middle section will resize itself to accomodate. This is known as a
liquid layout and will win you big points for being accessible and browser friendly.
To see this layout in action, go almost anywhere on the web because it is considered the Holy Grail of CSS layouts. Or you can go to my homepage.