CSS Absolute Position

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; }

Answer 2

I am guessing you will only need to absolutely position one of the two items you discuss. Leave the logo in normal page flow, and position the other item.

You could also use float:right on the one item, but that can be hard to troubleshoot across the spectrum of browsers.

I am not in touch with the CSS gods, but I say your plan of attack sounds like a fine use of absolute positioning.

Just be sure whatever wraps the two elements has position: relative

Absolute positioning can be really helpful when both elements are a different height

Answer 3

i would say probably easiest to make the right side image/div a float:right

that will let you shift things around fluidly