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

<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 2

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>

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.