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?

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

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

Solution 3

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

Solution 4

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: #FCC;
    padding: 10px;
}
#example1 .flexibleColumn {
    margin-left: 200px;
    background: #CFF;
    padding: 10px;
}

<div id="example1">

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

---

Example 2: CSS calc();

calc() works from IE9 upwards although support on some versions of android's browser is a little flakey: http://caniuse.com/#feat=calc

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;   
    background: #FCC;
    padding: 10px; 
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
    background: #CFF;
    padding: 10px;
}

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

---

Example 3: CSS Display as Table

#example3.table {
    display: table;   
    width: 100%;
}
#example3.table .fixedColumn {
    width: 180px;
    display: table-cell;   
    background: #FCC;
    padding: 10px;   
}
#example3.table .flexibleColumn {    
    display: table-cell; 
    background: #CFF;
    padding: 10px;  
}

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

---

Example 4: CSS3 Flexbox

Flexbox has surprisingly good support across browsers: http://caniuse.com/#search=flex

#example4.flex {
    display: flex;
}
#example4.flex .fixedColumn {
    width: 180px;
    background: #FCC;
    padding: 10px;  
}
#example4.flex .flexibleColumn {
    flex: 1 100%;
    flex-basis: auto;
    background: #CFF;
    padding: 10px; 
}

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

---

Example 5: CSS3 Grid

CSS Grid makes complicated layouts in CSS really intuitive and easy.

http://caniuse.com/#search=grid

#example5.grid {
    display: grid;
    grid-template-columns: 200px 1fr;
}
#example5.grid .fixedColumn {
    grid-column: 1;
    background: #FCC;
    padding: 10px;
}
#example5.grid .flexibleColumn {
    grid-column: 2;
    background: #CFF;
    padding: 10px;
}

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

Here's a codepen that features all 5 techniques:

2 Columns (1 Fixed, 1 Flexed) 5 different ways!

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

View more solutions

Comments

[paxdiablo]

+1 for being a smart *ss - oops, I mean realizing that you should do what works first, then think about purity of code. There's no point making your code CSS-beautiful if you miss deliverable dates.

[chaos]

Yes, it is. Thank you. :) Don't get me wrong, I'm not anti-CSS, and I was a much earlier adopter of it than many people I work with. I see the advantages. Just need to get used to occasionally having to do radically unintuitive things to get results, like in your link. :)

[chaos]

Nope. Right column gets minimum possible width, which data table inherits. Setting right column width to 100% gives it the entire width of the display area. No good.

[chaos]

And man, even this has issues. Semantic ones, to be precise; it requires the content column to come before the left column in the markup, so it's out of order for screen readers.

[chaos]

Ahh, beautiful. Between Scott Muc's link and this, every occasion seems to be covered.

[Dineshkumar]

Very interesting - I'd have guessed that the margin-left of the second div wouldn't be needed because it is the next div in order. Maybe that is what I was missing as well...gotta go try that!

[chaos]

Yeah, the margin-left is the missing link for me. What I basically needed was a way of saying "width: 100%-200px". Apparently, margin-left is how you say that. Sort of.

[CLaRGe]

Just remember that floats can become tough to manage when a page gets complex. There's nothing wrong with using tables for page layout, btw.

[Saurabh]

But this is a flaw in CSS. The fact that it's possible to learn to master it given enough time doesn't change that. Compare with learning GridBagLayout in Java (probably less than half a day)

[Peter Mortensen]

@Mark Brittingham: regarding "A List Apart". Do you mean alistapart.com/topics/design/typography or alistapart.com/topics/code/css ? Can you recommend something in particular?

[Dineshkumar]

Peter - the articles on A List Apart are often quite readable so I'll browse there looking for gems where I'll rarely do so on other sites. But if you are looking for something specific, they do have that ability to search on the site. Recommendations? Well, Ethan Marcotte's "Fluid Grids" was a good (and challenging) article for CSS geeks (alistapart.com/articles/fluidgrids). If you do much web design work, you will be a much better designer if you read Kevin Potts' "The Details That Matter" (alistapart.com/articles/the-details-that-matter). How's that to start?

[Andrew Vit]

Instead of the margin-left: 200px on the right column, you can apply overflow: hidden instead and it will create a new rendering context, which means it won't wrap around the left column. The advantage is that the left column width can change without having to adjust the margin for the right column to match it.

[Noel Walters]

Also - if anything follows this on the page then the height of the outer div will need to be fixed and have overflow:scroll/auto/hidden

[Zeta]

Please include relevant information in the answer itself. The external resource might change or go offline.

[misterManSam]

Hello from 2015! -1 Not enough CSS ;) Maybe you could update your answer and take advantage of its high position?

[Rodrigo]

That's a very polite way to say CSS SUCKS!