CSS: how to position buttons in groups across a row on a web page

I would prefer a CSS approach to using tables for this.

I have six buttons on a horizontal row. The buttons are grouped like this:

button1 button2              button3                button4 button5 button6

The left tw开发者_运维百科o buttons are on the left margin and are close to each other but are not touching.

The third button is in the middle -- doesn't have to be exactly centered, just separate.

The three buttons on the right are grouped together on the right margin, also not touching each other.

When the page is resized, the two buttons on the left stay on the left, while the three on the right slide back and forth with the right edge of the page.

This has to work in IE7.

Edit: If like me, you are struggling with the "layout tables vs. CSS" issue, check out this SO question. Over 600 upvotes.

IME, you should use a one- or two-row table. This kind of thing, which is a very common need, is also a huge pita with CSS. You could spend days. And, for once, it's not an IE shortcoming. So, in this case, I would just bow to the inevitable and use a small table. As I say, IMHO.

-- pete

Updated answer:

The best I could do without tables is this.

Details:

• Works in IE7-8-9, FF 4, Chrome 10
• Therefore should work fine in earlier FF/Chrome, and by extension Safari
• Opera is unknown, but it should work there as well
• Pure CSS, HTML uses div and ul/li for the button lists

Drawbacks:

• Includes CSS hack to target IE7 -- it's only a tiny one (*display: inline), but there you have it.
• You have to add the right side buttons in the reverse order you want them to display -- this is due to float: right and I don't know of a way to fix it while keeping the flush right alignment

This was still bugging me three years later. The best CSS solution I have come up with is this. It's still using tables, but with CSS. And it's easier to do some of the styling -- we can set the table-cell text alignment at the table level instead of the cell level.

This performs well when the screen is resized.

I'm using style attributes here for clarity.

<div style="display:table; width:100%; text-align:center;">
    <div style="display:table-row;">
        <div style="display:table-cell; width:7%;">button1</div>
        <div style="display:table-cell; width:7%;">button2</div>
        <div style="display:table-cell; width:65%;">button3</div>
        <div style="display:table-cell; width:7%;">button4</div>
        <div style="display:table-cell; width:7%;">button5</div>
        <div style="display:table-cell; width:7%;">button6</div>
    </div>
</div>