Question

Evening All,

Had a question on whether or not the use of Absolute postioning in my context would be considered wrong by the CSS gods. Basically what I am doing is using it to position images for the header bar of my website.

We can use SO as a good example. So the main logo at the top of our page is StackOverFlow followed by a menu. On the right side we have Ask Question. Now pretend with me that both of those elements are pictures. Would it be considered within reason to absolutely position those so that we don’t have to fight with any other CSS div positioning?

Cheers,

Mike

Answer 1

In my experience, you will generally find yourself disappointed with absolute positioning over, say, floats, meaning you’ll find some nasty corner cases that will make the whole exercise a hair-pulling experience.

The one exception to that is relative+absolute positioning. When used properly that can be incredibly useful.

But to do a heading like on the SO site I would probably just use floats.

<div id="header">
  <img id="left" src="image1.png">
  <img id="right" src="image2.png">
</div>

with:

#header { overflow: hidden; }
#left { float: left; }
#right { float: right; }

Most of the time, that’s problem solved.

It may be that only one of these needs to be floated. If its the one on the left:

<div id="header">
  <img id="left" src="image1.png">
  <div id="right">Some more content</div>
</div>

with:

#header { overflow: hidden; }
#left { float: left; width: 150px; }
#right { margin-left: 150px; }