Customer Street CSS

Since I started building more professional looking web sites I have always looked to code in as a high a quality as possible for the task at hand. This is why, until recently, I had never touched on using absolute positioning. I’d always been told that it was a pain to use and never worked properly and that all kinds of trouble could be associated with it’s use (such as when a browser window was resized all of the elements started to overlap and look horrible). For that reason it was a complete no go area for me.

However, more and more frequently I’m finding it a very handy aspect of style in web pages. As long as you know how to use it correctly it can create some awesome looking sites, works very well with javascript, and is relatively easy to use in a good development way.

One of the basic reasons I was always told not to use it is because when you absolutely position something you are taking it completely out of the document flow, which is not usually a good thing, and position attributes (such as top, and left) are values taken from the edges of the browser view pane… or are they?

But wait, that is not the case!

It is only the case if you are positioning elements inside a statically positioned element. To explain this a little easier we’ll use an example. Say we have an HTML document with a div that is 400 px wide, 500 pixels wide, has a 50 pixel margin from the top and is center aligned. If we stick another div in there with width 50 pixels, height 50 pixels and is absolutely positioned, the obvious happens. The small div inside our container div is taken out of the document flow and stuck right in the top-left of the users pane.

Now, try adding ‘position: relative’ to the container div. What happens? The div is now contained inside it’s parent and is positioned in the top and left corner of the container! It’s that easy. When you relatively position a containing div it contrains the proportions that our relatively positioned div can use and basically says ‘you can only be positioned from the edges of me’. This little trick is so very useful and I find myself using it a lot for positioning of elements inside a container that can be stuck exactly where they without worrying about the size of a browser window.

It has also helped our team of CSS Integrators who were having trouble building some CSS Documents around a static HTML page. Some of the items had to be taken out of the document flow in order to get them to position where they should have been.

I’ll admit that I would always still prefer to use floats, margins and padding to get the positioning of the web pages I create correct. But for smaller items that can make full use of absolute positioning, by all means go ahead and have a play with this. It’s a amazing what you can do with it when the correct need arises!

4

after 4 Votes