CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12517

Two column fluid layout which the left column is temporary

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>

Upvotes: 1

Views: 32

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99544

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.

Upvotes: 1

Related Questions