CSS Columns: Fixed Width and "Remainder"

CSS Columns: Fixed width and remainder ?

Update: Solved Using Flexbox

Now that we have Flexbox (with over 95% support globally) this layout (and others) can be easily achieved without styles being dependent on source order.

Flexbox Example:

HTML

<div class="flex-container">
   <div class="flex-column"> Big </div>
   <div class="fixed-column"> Small </div>
</div>

CSS

.flex-container {
   display: flex;
}
.flex-column {
   flex: 1;
}

.fixed-column {
  width: 200px;
}

Live Demo using Flexbox

---

---

---

Solved Using Floats

The trick is matching the remainder column’s margin to the floated sidebar’s width. Remember, source order matters when using floats, so we make sure the floated element comes first.

Example right-aligned small column:

HTML

<div id="Container">
    <div id="RightColumn">Right column</div>
    <div id="LeftColumn">Left column</div>
</div>

CSS

#RightColumn {
    float : right;
    width : 200px;
}

#LeftColumn {
    margin-right : 200px;
}​

Live Demo

• Right-aligned small column
• Left-aligned small column

CSS for table: 1 fixed width column, 1 small column, remaining columns equal

This will do the work for you:

CSS:

table { width: 95%; margin: 0 auto; table-layout:fixed;}
td {border: 1px solid}
.fixed {width: 200px;}
.small {width: 120px;}
.equal {width: 50%;}

Demo: http://jsfiddle.net/B8LnP/1/

• So What happens?
  
  Please note the table-layout:fixed;. With that and the width set on table (percentage of the containing element like in your case or a fixed amount), what happens is that first the fixed width columns are deducted from the table's width, and then the rest of the remaining width of the table is split among the remaining columns which have a percentage width or no width set at all (same as auto).

• Also if all of the remaining columns (other than the ones with fixed width) have a percent width, but the total of the percentages doesn't add up to 100%, the remaining percents are automatically distributed among fixed width columns, so make sure the percentages add up to 100%.

CSS: Two columns - one fixed width; the other to balance of viewport

I would go with flexbox to do this:

* {

 box-sizing:border-box;

}

header {

  width: 100vh;

  border-style: solid;

  border-width: 5px;

  border-color: saddlebrown;

}

header * {

  background-color: chocolate;

}

header h1 {

  text-align: center;

}

header p {

  text-align: justify;

}

.two-columns {

  width: 100vh;

  display:flex;

}

.left-column {

  width: 300px;

}

.right-column {

  flex:1;

  border-style: solid;

  border-width: 5px;

  border-color: green;

  margin:10px;

  padding:10px;

 }

<header>

  <h1>This high-bar should be 100vh wide.</h1>

  <p>Lorem ipsum dolor sit amet, dictas eleifend id pro, inermis graecis recteque ut vix. Per invenire eleifend an. Duo vero nemore te, mediocrem vituperata qui eu. Semper numquam ne pri, et eos dico epicuri, cum in dicta oratio. Voluptaria inciderint eum

    ne, doctus patrioque vituperatoribus ei usu. Ut sed brute perfecto quaerendum, mei duis doming oporteat ea. At eam omittantur vituperatoribus. Sea te nobis euismod persecuti. Id alienum apeirian erroribus his, ad sit magna solum efficiantur, sanctus

    tibique ut sit. Eum dolorum voluptatibus ex, in eum fuisset insolens.</p>

</header>

<div class="two-columns">

  <div class="left-column">

    <p>This left column is a fixed 300px wide.</p>

    <img src="https://images.unsplash.com/photo-1484677460604-9c1334e783a1?ixlib=rb-0.3.5&s=057251dd8afbb9405720551a85f584ae&auto=format&fit=crop&w=300&q=80" />

  </div>

  <div class="right-column">

    <p>This right column should take up the remainder of the space. The width of this bit should be 100vh - 300px - a bit for margins and borders and such.</p>

  </div>

</div>

Two floated columns - one fixed, one loose width

Have a look at this.
There aren't any demos, but I've used tutorials from this guy before so I assume it works fine. I gather from the article that the main content is liquid. The side content may also be liquid, but I think you can just give it a fixed width and leave it at that. The trick here is to place the main content first.

html table -- set column to take remaining space, and at least 300px width

I think the problem lies with table-layout: fixed;

According to here, the value fixed will set a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Could be why the min-width is not working for the td.

table {

  display: table;

  width: 100%;

  /* table-layout: fixed; */

  white-space: nowrap;

  color: white;

}

table td {

  overflow: hidden;

}

td.fixed-width {

  background: blue;

  width: 200px;

  min-width: 200px;

}

td.remaining-width-or-300-pixels {

  background: red;

  overflow: hidden;

  min-width: 300px;

 

}

<table>

  <tr>

    <td class="fixed-width">A set width column</td>

    <td class="remaining-width-or-300-pixels">

    A column 

    </td>

    <td class="fixed-width">A set width column</td>

  </tr>

</table>

Flexbox with one fixed column width

Instead of setting width in % on right column you can just use flex: 1 and it will take rest of free width in a row.

.flex_container {

  display: flex;

  width: 100%;

}

.flex_item_left {

  width: 200px;

  background: lightgreen;

}

.flex_item_right {

  flex: 1;

  background: lightblue;

}

<div class="flex_container">

  <div class="flex_item_left">

    .....

  </div>

  <div class="flex_item_right">

    .....

  </div>

  <div>

How can I have two fixed width columns with one flexible column in the center?

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

• 0 = don't grow (shorthand for flex-grow)
• 0 = don't shrink (shorthand for flex-shrink)
• 230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

See fiddle, thanks @TylerH

Oh, and you don't need the justify-content and align-items here.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Two column div layout, with one taking the remainder

It looks like you need a table. I think you should try to solve your issues with ie6 and tables instead.

---

Related Topics