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

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?

Answers


<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).


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...)


Is this what you're looking for?

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}
<div id="framecontent">
    <div class="innertube">

      <h1>CSS Left Frame Layout</h1>
      <h3>Sample text here</h3>

    </div>
  </div>


  <div id="maincontent">
    <div class="innertube">

      <h1>Dynamic Drive CSS Library</h1>
      <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
      </p>

    </div>
  </div>

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.


To keep this question up-to-date, here are 5 ways you can achieve the same thing using both CSS2 and CSS3.


 

Example 1: Floats & Margin

This is the way it's been done for years: Simple and effective.

#example1 .fixedColumn {
    width: 180px;
    float: left;
    background-color: #FCC;
    padding: 10px;
}
#example1 .flexibleColumn {
    margin-left: 200px;
    background-color: #CFF;
    padding: 10px;
}
<div id="example1">

    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

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.


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.


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>

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.


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.


Need Your Help

Show datepicker on textfield tap

ios xcode uitextfield uidatepicker

I'm very new to iOS so obviously I'm missing a few concepts when trying to follow this solution Display datepicker on tapping on textfield to my problem.

Calculate an incremental mean using python pandas

python pandas

I'd like to generate a series that's the incremental mean of a timeseries. Meaning that, starting from the first date (index 0), the mean stored in row x is the average of values [0:x]