1

This is a bit of a conundrum. I have a templating system where I want to have a two column layout with a fixed width left column and a fluid right column.

However, within the template, sometimes the left column won't show and I don't want the layout to break and still have the right column to extend all the way across.

Example 1:

<div id="left_column">
    300px fixed width
</div>
<div id="right_column">
    Remaining width
</div>

Example 2:

<div id="right_column">
    Remaining 100% width
</div>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Jimmy
  • 12,087
  • 28
  • 102
  • 192

1 Answers1

1

First of all, you should use float property to float the left column.

Then can use adjacent sibling selector + to select the #right_column that immediately follows the #left_column in order to apply a left margin on that element.

Note: adding margin-left property prevents the right column from going beneath the left one. You can verify this by using background colors for the columns and setting different heights.

Here you go:

#left_column {
  width: 300px;
  background-color: orange;
  float: left;
}

#left_column + #right_column {
  margin-left: 300px;
}

WORKING DEMO.

In this case, without the #left_column, the right column won't have any margin of its left side.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • i prefer `display:inline-block` than float. – T J Mar 08 '14 at 12:00
  • @TilwinJoy That's okay, but note that there will be a [white space between inline-block](http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532) elements as they're in inline flow, which you have to remove that. – Hashem Qolami Mar 08 '14 at 12:10
  • thanks for the info. i'm trying to avoid floating ever since i've seen the `clearfix` classes :) – T J Mar 08 '14 at 12:13