3

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.

Community
  • 1
  • 1
DOK
  • 32,337
  • 7
  • 60
  • 92
  • The answer depends entirely on what the buttons are for. Are they standalone actions, navigation links, inline links or form buttons? There are many ways to make buttons looks like the way you say; the choice is based on semantics. – melkamo Mar 30 '11 at 18:01

3 Answers3

2

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

Pete Wilson
  • 8,610
  • 6
  • 39
  • 51
  • And don't forget (like I did) that you can't put a width on a so you probably will have to insert two blank s around the center button. – Pete Wilson Mar 30 '11 at 18:34
  • I keep hearing the mantra "tables are evil, use CSS" but whenever I try to accomplish something mildly complicated like this, no can do. I was kind of hoping there was a trick I didn't know, maybe grouping the buttons in span tags or something. Thanks for your input. – DOK Mar 30 '11 at 23:47
  • @DOK, yeah the CSS Gestapo are behind every door. Yes, you could put the buttons in tags. But even then, when you go to narrow the viewport, those suckers are going to migrate down to the next line(s), and the next line(s) will take on the left margin of the containing div, and your layout will break, and everything will look terrible. As you know. Sometimes it's better, I think anyway, to accept the unkosher just to get the thing done. – Pete Wilson Mar 31 '11 at 15:31
  • speaking of the CSS Gestapo, right after I added my comment here, someone voted my question down, LOL. But I think I will follow your advice, and thanks for your input. – DOK Mar 31 '11 at 18:16
1

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>
DOK
  • 32,337
  • 7
  • 60
  • 92
1

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
Jon
  • 428,835
  • 81
  • 738
  • 806