Can you do this HTML layout without using tables?

Question

Ok, I had a simple layout problem a week or two ago. Namely sections of a page needed a header:

+------------------         


        

Answer 1

This is kind of a trick question: it looks terribly simple until you get to

Say I want the title and button to be vertically centered.

I want to state for the record that yes, vertical centring is difficult in CSS. When people post, and it seems endless on SO, "can you do X in CSS" the answer is almost always "yes" and their whinging seems unjustified. In this case, yes, that one particular thing is hard.

Someone should just edit the entire question down to "is vertical centring problematic in CSS?".

Answer 2

There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.

In this case a table worked perfectly.

I personally would have used a table for this.

I think nested tables should be avoided, things can get messy.

Answer 3

Float title left, float button right, and (here's the part I never knew until recently) - make the container of them both {overflow:hidden}.

That should avoid the z-index problem, anyway. If it doesn't work, and you really need the IE5 support, go ahead and use the table.

Answer 4

Just float left and right and set to clear both and you're done. No need for tables.

Edit: I know that I got a lot of upvotes for this, and I believed I was right. But there are cases where you simply need to have tables. You can try doing everything with CSS and it will work in modern browsers, but if you wish to support older ones... Not to repeat myself, here the related stack overflow thread and rant on my blog.

Edit2: Since older browsers are not that interesting anymore, I'm using Twitter bootstrap for new projects. It's great for most layout needs and does using CSS.