CSS has two primary benefits. One is the ability to easily edit the look and feel (the theme if you will) of your website by changing very little code. This is evidenced by a quick visit to the CSS Zen Garden which has the same HTML code, but uses different style sheets to make it all look completely different. The second is positioning and layout which allows to easy move different pieces on a page because it doesn’t ascribe to the rigidity of tables.

However, CSS layout can get a little confusing when you are just starting out. So this article will discuss the different attributes you can assign to tag objects and when each of them is appropriate.

Position:
The position property has 4 possible values of static, absolute, relative, and fixed. Static is essentially the default that lets an element just fall wherever it falls. You’ll only find yourself defining an element as have a static position if you need to correct for a previous assignment of something else other than static. The fixed value will put an element at an exact location within the browser regardless of scrolling or screen size. The fixed value is always used in conjunction with the top, right, bottom, and left properties which will be discussed after positioning.

The remaining two properties are the more common definitions, and are also always used in conjunction with the top, right, bottom, and left properties. Absolute positioning is used when you want an element to exist at an “absolute” location within the page. The only difference between absolute and fixed is that fixed ignores scrolling, whereas absolute does not. So if I wanted the logo of the website I’m designing to always be located exactly 10 pixels from the top of the window, and 30 pixels from the left (and if I scrolled down the page it would go out of view), then I’d use the following CSS:

img#logo{
   position: absolute;
   top: 10px;
   left: 30px;
}

I personally think that absolute positioning is a bad idea because it leaves you with something almost as rigid as a table. To move something around you have to constantly adjust pixel positions, and use z-index in case objects overlap. This can sometimes be useful so you don’t have to layer things using background images with multiple divs, but in general, I personally choose to avoid it. Then there is the relative value. Relative positioning is exactly what it sounds like, it positions an element relative to where it should be located. So if an element naturally falls at a certain location, and you give it a “top: 10px;” and “right: 30px;” then it will appear 10 pixels further down, and 30 pixels left of that certain location. This is also occassionally useful, but I personally prefer another option… floating. This I’ll discuss soon.

Top, Right, Bottom, Left:
These four properties are used when a position of fixed, absolute, or relative has been assigned to the same element (such as a div or an img). These positions can be set using pixels or any other length measurement that CSS accepts, as well as %. They can also have negative values which is helpful to push things around when you need to. Again, I however personally prefer floating my elements.

Float:
If you ask me, the float property is the absolute best characteristic of CSS, and it blows position out of the water. Why do I love it so much? Well, I’ll admit that it can be finicky, but once you get used to how it works, it is absolutely fantastic for building very fluid designs that you can easily change. Float only has three options, left, right, or none. None is the default value. If you add a “float: left;” to your definition then that element will move as far to the left as it can, meaning within its own parent element. Giving is a “float: right;” will do the same thing but obviously to the right instead. Check out the example below of two divs, one floating left, and one floating right:

The HTML:

<div style="float: left; width: 150px; border: solid 3px #444444; padding: 5px;">
  This div will float left
</div>
<div style="float: right; width: 150px; border: solid 3px #444444; padding: 5px;">
  This div will float right
</div>

And the outcome:

So now that you see how the float works, you might be able to see why it can be so helpful. Imagine just having to change two words in your CSS file, and those two divs would switch locations. Now the reason it can get finicky is because of space issues. An element will float within its parent element as high up as it possibly can. So that means if I increased the width of those sample divs to more than half the allotted space, then the second div would be forced below the first (but still on the right side). You can apply float to a whole lot of elements, but primarily you’ll probably be using it with div, img, and p.

More notably, float is used to make text wrap around other elements such as an image. This is incredibly common and incredibly useful. Just apply a float to the image right before the paragraph and the paragraph text will wrap around it. You’ll probably also want to apply a margin so that the text doesn’t touch the image though.

Well, good luck with your positioning escapades. Let me know if you have any problems.