css Suggestion for 3 columns

I'm looking to create a header like:

<div id="header>
 <span class="left></span>开发者_开发问答
 <span class="center"></span>
 <span class="right></span>
</div>

So have a header that's all inline. the left to all the way to the left, the right is all the way to the right, and the center is in the center of the header.

The challenge is #header is fluid. Any CSS suggestions. right now the best way I can think to get this done is with a table with 3 rows.

Thanks

---

Try this:

http://jsfiddle.net/z7k3J/

If you adjust the spacer bar in the middle of the page, you will see that all of your "columns" stay appropriately aligned.

The key is that all of the columns' widths add up to 100% and you float them all to the left (or right, it doesn't really matter). When your widths are percentage-based, they will adjust appropriately as the parent changes size.

If you only care about the text being right/center/left (and not images, etc), you could also make all of the columns 100% width and absolutely positioned, and then just use text-alignment:

http://jsfiddle.net/h7qB8/

---

Is there a reason that floating the left and right spans won't work for you?

---

Can you re-order the HTML to be left/right/center (or right/left/center)? If so, float the columns and use margins or borders on the center to hold it off the side bars.

---

This would be a good start:

<div id="header" style="position:relative;width:100%;">
 <div class="left" style="position:relative;width:200px;float:left;"></div>
 <div class="center" style="position:relative;float:left;text-align:center;"></div>
 <div class="right" style="position:relative;width:100px;float:right;"></div>
</div>

This will center everything in the middle div and keep the other 2 divs to the side. Make sure the element containing the header div is set to position:relative;width:100%; as well.

---

You can also use display: inline-block on the inner elements, on the outer container do a text align center, and then on .left float: left; .right float: right. This would allow you to set a width on the spans, but keep them evenly spaced from the center. See:

#header {
     width: 100%;
     text-align: center; 
}

.left, .center, .right {
    display: inline-block;
    width: 100px;
    border: 1px solid green;
}

.center {
     text-align: center;

}

.left {
    float: left;
}

.right {
    float: right;
}

You don't mention it in your question but have it in your tag - if you're able to use CSS3 then the possibilities open up more. You can use the flex box layout: http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/ or css3 columns: https://developer.mozilla.org/en/CSS3_Columns