tags:

views:

4248

answers:

10
+19  A: 

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.

Milan Babuškov
+11  A: 

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.

Ant P.
+1 Whoa, what's with the overflow hidden? It does make a difference. No idea why though.
cletus
To be honest, I don't get it either, and couldn't find any mention of it in the spec. Someone told me that's the "right" way though, after I answered another question suggesting they use a cleared element to do it. Seems like a good idea to me.
Ant P.
The floated elements still need to be cleared for the content following them to flow properly. overflow:hidden; only addresses the container's height.
Zack Mulgrew
"overflow: hidden" is a hack to achieve BOTH height 'expansion' and clearing. Following elements WILL clear that box (in browsers that implement that part of the spec correctly, at least).
Bobby Jack
+1  A: 

Do a double float in a div and use the clearfix. http://www.webtoolkit.info/css-clearfix.html Do you have any padding/margin restrictions?

<div class="clearfix">
   <div style="float:left">Title</div>
   <input type="button" value="Button" style="float:right" />
</div>
bendewey
I have a vertical centering requirement (and a little extra padding). I think I clarified that after you posted though.
cletus
+1  A: 
<div class="group-header">
    <input type="button" name="Button" value="Button" style="float:right" />
    <span>Title</span>
</div>
ob
+12  A: 

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.

gbrandt
Except when you're using a table for presentational layout rather than tabular data just because it's easier at first pale, in which case you're headed down a dark and dangerous path.
One Crayon
Even Amazon uses tables in certain cases. And stackoverflow.com does, too. I'm all for css solutions when they actually work well.
Nosredna
Neither amazon, now stackoverflow are pinnacles of web design.
Bobby Jack
They may not be, but they're working solutions that serve tens of thousands of users.
17 of 26
This anti-table meme is just plain old stupid. The only 2-dimensional layout manager for flexible constraints-based laout is table; and whether it's just one complicated one (with myriad of col/rowspans), or nested ones makes little difference.But reality and facts are not always good enough weapons against zealotry it seems.
StaxMan
+1  A: 

If you haven't seen this yet, the comments in a recent css/table war at Ajaxian are interesting.

http://ajaxian.com/archives/css-for-layout-another-rant

Nosredna
+1  A: 

I would recommend not using a table in this instance, because that is not tabular data; it's purely presentational to have the button located at the far right. This is what I'd do to duplicate your table structure (change to a different H# to suit where you are in your site's hierarchy):

<style>
  .group-header { background: yellow; zoom: 1; padding: 8px; }
  .group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  /* set width appropriately to allow room for button */
  .group-header h3 { float: left; width: 300px; }
  /* set line-height or margins to align with h3 baseline or middle */
  .group-header input { float: right; }
</style>

<div class="group-header">
  <h3>This is my title</h3>
  <input type="button" value="Collapse"/>
</div>

If you want true vertical alignment in the middle (ie, if the text wraps the button is still middle-aligned with respect to both lines of text), then you either need to do a table or work something with position: absolute and margins. You can add position: relative to your drop-down menu (or more likely its parent) in order to pull it into the same ordering level as the buttons, allowing you to bump it above them with z-index, if it comes to that.

Note that you don't need width: 100% on the div because it's a block-level element, and zoom: 1 makes the div behave like it has a clearfix in IE (other browsers pick up the actual clearfix). You also don't need all those extraneous classes if you're targeting things a bit more specifically, although you might need a wrapper div or span on the button to make positioning easier.

One Crayon
Your solution does not work on IE6 though because of the :after pseudo-class.
Sebastian Hoitz
It does work in IE 6, thanks to the `zoom: 1` in `.group-header`, which triggers hasLayout and cause IE 6 to behave the same as if it had the :after element active.
One Crayon
+8  A: 

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?".

AmbroseChapel
That's kind of my problem with the "table haters" argument: CSS can do everything tables can do... except for some pretty simple, common and reasonable cases (like vertical centering). CSS just seems like an election promise gone bad.
cletus
My point was that vertical centring is just about the ONLY thing that's truly hard.
AmbroseChapel
CSS isn't meant to replace tables; it's just meant to allow you to solve most of the common layout problems without tables. If a table works, use a table, just like you would use a pen to draw instead of a sledge hammer.
Aaron Digulla
+1  A: 

In pure CSS, a working answer will one day be to just use "display:table-cell". Unfortunately that doesn't work across current A-grade browsers, so for all that you might as well use a table if you just want to achieve the same result anyway. At least you'll be sure it works far enough into the past.

Honestly, just use a table if it's easier. It won't hurt.

If the semantics and accessibility of the table element really matter to you, there is a working draft for making your table non-semantic:

http://www.w3.org/TR/wai-aria/#presentation

I think this requires a special DTD beyond XHTML 1.1, which would just stir up the whole text/html vs application/xml debate, so let's not go there.

So, on to your unresolved CSS problem...

To vertically align two elements on their center: it can be done a few different ways, with some obtuse CSS hackery.

If you can fit within the following constraints, then there is a relatively simple way:

  • The height of the two elements is fixed.
  • The height of the container is fixed.
  • The elements will be narrow enough not to overlap (or can be set to a fixed width).

Then you can use absolute positioning with negative margins:

.group-header { height: 50px; position: relative; }
.group-title, .group-buttons { position: absolute; top: 50%; }
# Assuming the height of .group-title is a known 34px
.group-title { left: 0; margin-top: -17px; }
# Assuming the height of .group-buttons is a known 38px
.group-buttons { right: 0; margin-top: -19px; }

But this is pointless in most situations... If you already know the height of the elements, then you can just use floats and add enough margin to position them as needed.

Here is another method which uses the text baseline to vertically align the two columns as inline blocks. The drawback here is that you need to set fixed widths for the columns to fill out the width from the left edge. Because we need to keep the elements locked to a text baseline, we can't just use float:right for the second column. (Instead, we have to make the first column wide enough to push it over.)

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; }
      .valign { display: inline-block; vertical-align: middle; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { padding: 8px; width: 384px; }
      .group-buttons { padding: 8px; width: 84px; text-align: right; }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
      .valign { display: inline; margin-top: -2px; padding-top: 1px; }
    </style>
    <![endif]-->
  </head>
  <body>
    <div class="group-header">
      <div class="valign">
        <div class="group-title">This is my title.</div>
      </div><!-- avoid whitespace between these! --><div class="valign">
        <div class="group-buttons"><input type="button" value="Collapse"></div>
      </div>
    </div>
    <div class="group-content">
      <p>And it works perfectly, but mind the hacks.</p>
    </div>
  </body>
</html>

The HTML: We add .valign wrappers around each column. (Give them a more "semantic" name if it makes you happier.) These need to be kept without whitespace in between or else text spaces will push them apart. (I know it sucks, but that's what you get for being "pure" with the markup and separating it from the presentation layer... Ha!)

The CSS: We use vertical-align:middle to line up the blocks to the text baseline of the group-header element. The different heights of each block will stay vertically centered and push out the height of their container. The widths of the elements need to be calculated to fit the width. Here, they are 400 and 100, minus their horizontal padding.

The IE fixes: Internet Explorer only displays inline-block for natively-inline elements (e.g. span, not div). But, if we give the div hasLayout and then display it inline, it will behave just like inline-block. The margin adjustment is to fix a 1px gap at the top (try adding background colors to the .group-title to see).

Andrew Vit
A: 

I agree that one should really only use tables for tabular data, for the simple reason that tables don't show 'til they're finished loading (no matter how fast that is, it's slower that the CSS method). I do, however, feel that this is the simplest and most elegant solution:

[html][head][title]stack header[/title] [style type="text/css"]

stackheader {

background-color: #666; color: #FFF; width: 410px; height: 50px; }

title {

color: #FFF; float: left; padding: 15px 0 0 15px; }

button {

color: #FFF; float: right; padding: 15px 15px 0 0; } [/style][/head][body] [div id="stackheader"] [div id="title"]Title[/div] [div id="button"]Button[/div] [/div] [/body][/html]

The button function and any extra detail can be styled from this basic form. Apologies for the bad tags.

Galen777