Ian Swenson .com

Positioning with CSS

Now that we know how to use rudimentary HTML and CSS we can learn how to use CSS to move stuff around on a web page.

By the way, as you’ve probably noticed, the scope of this tutorial is not to exhaustively teach you HTML and CSS. There are dozens of elements, attributes, properties, and values that I haven’t exposed you to here. Here is a list of all HTML elements, a list of CSS properties and their values, and here is another making a page-style tutorial on the two by the W3C.

All box items in HTML have a default CSS position of static. This means the element has nothing special about where it’s located in relation to other elements on the page. There are four other common positions used to tell stuff to move around on a web page.

1. Absolute — This is the easiest to understand, in my opinion. When an element is absolutely positioned it will go where you tell it relative to its parent element, which by default is the browser window. A parent element is one which contains the element in question. Here is the HTML example of a parent element (#foo is the parent of #bar):

1
2
3
4
5

<div id="foo">
     <div id="bar">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
     </div>
</div>

If we were to give the #bar div absolute positioning and tell it that it’s 0 pixels from the bottom, it would stick to the bottom of the #foo div, since that is its parent. Here’s a CSS example of absolute positioning:

1

#foo { position: absolute; top: 100px; left: 10px; width:200px; }

This will make a 200 pixel wide box that will be 100 pixels from the top of the screen, and 10 pixels from the left. You can also use right or bottom properties in lieu of their counterparts.

2. Relative — This is similar to absolute positioning. The one major difference is that position: relative; is placed relative where it would be normally placed. You would use this when you want an element in its normal flow position, but offset a bit. An example with both HTML and CSS:

1
2
3
4
5
6
7

<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p class="offset">Lorem ipsum...</p>
 
...
 
.offset { position: relative; left: 20px; }

The third paragraph element would be pushed 20 pixels to the left, but would still be in its normal spot otherwise. Were you to do the same code with absolute positioning, it would assume the top placement to be zero, causing it to strangely overlap with the first paragraph.

3. Fixed — This is also similar to absolute except for one major difference: it stays put, even with scrolling. So while an absolute positioned element will still move around when the scrollbar is used, an element with position: fixed; stays put.

4. Floats — These are tough, I admit. I’ve been playing with CSS for years and I still have a tough time with floats.

Floats work with horizontal positioning. Remember when I told you that box elements defaultly give you a line break? Well floats cancel that. This is how you can have several boxes lined up next to one another or a picture with wrapping text beside, above and below it.

I could easily write an entire article on floats and not have it cover the entire topic. So instead, I’m going to pass the buck. Here is an excellent article on floats. Also here are some examples of positioning for you.

Here is an example of floats, since we’re going to be using the technique for our first page:

1

#foo { float: left; }

This will allow the element #foo to have anything after it on its right side as much as possible. It’s also good practice to clear the float after it is done to prevent the collapsing of the parent element. There are number of ways to do this (one would be to add clear : left; to the next element), but I use the clearfix method as described by positioniseverything.