One of the hardest things to figure out in CSS is how to position things on the screen. Normally, people do this by using <table> hacks, but these are actually hazardous to your health. I'm bald right now, because of all the hair-pulling episodes I've had trying to update sites using this ugly technique.

Believe it or not, CSS positioning is not a black art. Once you have the hang of it, you'll realize that it is a whole lot easier than table hacks. Instead of keeping constant track of what <tr> tag I'm on and what width the <td> tag... so on and so forth, I just write two rules, using the clear language of CSS.

The only downside to this is that a lot of browsers are ignorant to CSS. Even less are hip to the positioning side of things. Don't let that get you down, however, there are ways to cleverly manuver around such bugs.

Also note that you can only position so called "block" display types. This basically means that you can position things like <div>, <p>, and <blockquote>. Anything that formats a block of text, really. Note that this does not include "inline" display types such as <a>, <b>, and <font>.

Let us begin.

The Position Property

In order to position things, we first must tell the browser how to position such things. So, here's a nifty list of possible values:

  • absolute - This value lets you position the thing wherever you want (relative to the thing's parent element)
  • fixed - Just like absolute, only with the addition that it stays fixed to the location that you set. Sadly, many browsers break when they see this. So, we're forced to ignore this.
  • relative - This value lets you position the thing wherever you want it to be relative to where it would normally be.
  • static - Returns the thing you are positioning to how it would normally be. Since this pretty much cancels out positioning, we can effectively ignore this.
  • Let's demontrate this:
    p { position: absolute; }

    Moving the things

    Now the browser knows how to position the thing, now it has to actually position it. Here's where you specify these attributes:

  • top - Where the top of the thing should be.
  • left - Where the left side of the thing should be.
  • width - How wide the thing should be.
  • height - How tall the thing should be.
  • Let's demonstrate this:
    p { position: absolute; top: 100px; left: 150px; width: 300px; height: 500px; }

    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:

    <head><title>Some title</title></head>
    <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>
    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.

    Log in or register to write something here or to contact authors.