In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?

Question

So I've tried to work with the pure-CSS, never-use-tables-for-layout gospel, I really have. But after an incredible amount of pain and anguish, I'm just about ready to give up. I'm willing to go to some effort to accomplish things in CSS, don't get me wrong. But when it seems like some of the most asininely simple things that can be done with layout tables are utterly impossible in CSS, I don't care if conceptual purity really starts to take a beating.

Now, it probably seems like I'm angry, and I am; I'm angry about my wasted time, I'm angry about people coming out of QuarkXpress backgrounds handing me useless fixed-width designs, I'm angry about the failed promise of CSS. But I'm not trying to start an argument; I really do want to know the answer to one simple question that will determine whether I give the pure-CSS thing another try or lump it and use layout tables whenever I feel like it. Because I'd hate to go back to layout tables thinking that this thing is impossible if it's actually not.

The question is this: is there any way using pure-CSS layout to have a column on the left, which is fixed-width, and to the right of it place a data table, and have the data table neatly take up the remainder of whatever space is available? That is, the same layout which is easily achievable by having a two-cell layout table with width 100% and a fixed width on the left cell?

Answer 1

Is this what you're looking for?

I feel your pain, but try not to look at it as time wasted. I'm sure you have a much better grasp of CSS than you previously did. Keep working with it and you'll start seeing the advantages. I personally have found CSS to be one of those things that takes a lot of practice to become proficient in. I've been using CSS based layouts for 5 years and I still learning interesting tricks everyday.

Answer 2

Something like this:

<div style="position: relative; width: 100%">
    <div style="position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style="position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

Of course, you should probably put the styles in a separate stylesheet rather than inline. And a single fixed-width column on the left is fairly simple, but occasionally I do see other layouts which can be done easily with tables but are, as far as I know, fiendishly difficult with CSS.

Answer 3

There is almost certainly an answer that involves applying display:table and display:table-cell to the elements in question. Which is to say... no.

Answer 4

I love how CSS still takes a full page of code to duplicate a couple lines of using a table.

After fighting the CSS war, I've come to the conclusion that "pure" is in the eye of the beholder and have moved to more of a "let's just use what works" approach.

Use CSS on what it's good for: making things look pretty. Use DIV's and SPAN's when you can. But if you find yourself spending a day trying to get things to line up right across all the different browser flavors, then slap a table in there and move on. Don't worry, contrary to what most people seem to think, a puppy will in fact not die.

Answer 5

First, I'd recommend Eric Meyer's CSS books as well as the CSS reference on the web: A List Apart. I use CSS extensively in my work and I think that I have gotten pretty good with it.

With all of that being said: do what works. I have been through exactly the pain that you've just experienced. In the end, I figured that it wasn't worth compromising my design just to be able to say that I hadn't used tables.

Remember: you aren't paid to do CSS - you are paid to write working software.

Answer 6

I think this is what you're looking for:

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

Thank me later. =P

(I'm obviously joking.... kind of...)

Answer 7

<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

That should do it (obviously implementation will vary based on where it is in the page, but I think that's the concept you're looking for).

Answer 8

You might want to try these:

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto

Here's why:

http://en.wikipedia.org/wiki/Tableless_web_design

http://davespicks.com/essays/notables.html

More HowTOs:

    div.row {
      clear: both;
      padding-top: 10px;
    }

    div.row span.label {
      float: left;
      width: 100px;
      text-align: right;
    }

    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
    }


    <div style="width: 350px; background-color: #cc9;
      border: 1px dotted #333; padding: 5px;
      margin: 0px auto";>
      <form>
        <div class="row">
          <span class="label">Name:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Age:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Shoe size:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Comments:</span><span
              class="formw">
            <textarea cols="25" rows="8">
            Go ahead - write something...
            </textarea>
          </span>
        </div>
        <div class="spacer">
          &nbsp;
        </div>
      </form>
    </div>

Answer 9

As Sparr says, there's CSS that specifically meets this requirement, because it's not really possible to do it any other way without various, possibly unacceptable compromises, and that's display:table, display:table-cell, etc.

Unfortunately Internet Explorer prior to Internet Explorer 8 doesn't support these display modes, so the problem is not really with CSS but with a failure of browsers (actually Internet Explorer, the others are fine) to support CSS adequately.

The good news is that this is changing, and in due course, we will have a proper CSS solution. In the meantime, pick one of the compromises in the other answers.

Answer 10

Take a look at the Yahoo User Interface Library (YUI). They have solved most of the page layout problems out there with a cross-browser library based on CSS. And they not religious about tables verses divs.