Position absolute vs float in XHTML/CSS

Question

Hi, I want to convert a .psd to XHTML and I have a menu bar whith round corners streching all the width of the wrapper, what I did so far was making slices for the ends of the bar and one for the center that is set to repeat-x.

For example I have this:

 <div id="tagline" class="grid_16"><!-- begin tagline -->
            <div class="left"></div>
            <div class="center">
                <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
            </div>
            <div class="right"></div>
 </div><!-- end tagline -->


#tagline {background:url(images/tagline.jpg) repeat-x top; height:96px;}

#tagline .center {width:930px; float:left;}
#tagline .left {background:url(images/taglineLeft.jpg) repeat-x top left; width:10px; height:96px; float:left;}
#tagline .right {background:url(images/taglineRight.jpg) repeat-x top right; width:10px; height:96px; float:right;}

I am using float for positioning the ends, and my question is what's the best solution using float or position:absolute. I ask this becauase I don't want to have problems whith older browsers.

Thank's.

Answer 1

Your code is mostly correct. float will work OK, but you have to float all those elements to the left. Don't float the last one right, it doesn't do what you think it does.

---

I mean:

#tagline .right { ... float:left;}

Answer 2

You can try nested DIVS with background-image, background-repeat and background-position set. Something like this:

<div id="tagline">
  <div     style="background-image: url(images/tagline.jpg);      background-repeat: repeat-x;">
    <div   style="background-image: url(images/taglineLeft.jpg);  background-repeat: no-repeat; background-position: left;">
      <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;">
          <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
      </div>
    </div>
  </div>
</div>

No floats of absolute positions necessary. I have inlined the styles for clarity. Remember to setup the width and height on the outermost DIV. This tip was inspired by this article.