Html – 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 two 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.

Best Solution

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