Two columns with variable width and a fixed gap between them

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

Answer 1

I know this is a few months old, but I have another potential solution, which I will post here for posterity, in case it helps someone else:

What I did was snug two columns right in next to each other, and then place the real columns inside of those columns, using a 5px margin on each, on the shared side, to create the illusion of a 10px gap.

I have set up a demo similar to the original one Chris put up, only using this trick to create the gap between the columns.

Here is a fiddle of the snippet below:

$(document).ready(function() {
  $('#left').click(function() {
    $('#left').text('').animate({
      width: '0%'
    }, 'slow');
    $('#right').animate({
      width: '98%'
    }, 'slow');
  });
});

#container {
  height: 500px;
  width: 90%
}
#left,
#right {
  border: 1px Red solid;
  height: 100%;
  width: 48%;
  float: left;
}
.halfWidthColumn {
  float: left;
  height: 100%;
  width: 50%;
  margin: 0px;
  padding: 0px;
}
.interiorColumn {
  border: 1px Black solid;
  background-color: White;
  height: 100%;
}
.leftSide {
  margin: 0 5px 0 0;
  background-color: Blue;
}
.rightSide {
  margin: 0 0 0 5px;
  background-color: Green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    Click to collapse
  </div>
  <div id="right">
    <div class="halfWidthColumn">
      <div class="interiorColumn leftSide">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
    <div class="halfWidthColumn">
      <div class="interiorColumn rightSide">
        When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of
        Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
      </div>
    </div>
  </div>
</div>

Notice that I am no longer using JavaScript to resize the two interior columns. I believe this will do what was originally requested, if I am not mistaken.

Answer 2

you can use this

<style>
#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;}
</style>

in html

<div id="container">
<div id="left" class="column"></div>
<div id="space"></div>
<div id="right" class="column"></div>
</div>

this works in FF

Answer 3

You'll need either tables or CSS tables.

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