Question

I need to style two columns dynamically. They should have a width of 50% each, but a fixed gap of 10px between them.

When I collapse my menu the columns should widen to the space available and the gap should remain 10px. Because of this a can’t take a fixed width for the columns.

I tried this:

#container {
  background: red;
  width: 100%;
  height: 20px;
  padding: 0 -5px;
}
.column {
  height: 20px;
  float: left;
  width: 50%;
}
#left {
  background: green;
  margin-left: -5px;
}
#right {
  background: blue;
  margin-right: -5px;
}
#space {
  width: 10px;
  float: left;
  height: 20px;
}

<div style="width:400px; border:1px solid black">
  <div id="container">
    <div id="left" class="column"></div>
    <div id="space"></div>
    <div id="right" class="column"></div>
  </div>
</div>

But then the blue and the green divs expand over the outer div with the black border.

This is what it should look like. Any chance that i can set a relative height for the columns or am i forced to use javascript when collapsing my menu?

Answer 1

You’ll need either tables or CSS tables.

CSS tables should be supported by all browsers except IE7 and below.