HTML/CSS: Layout columns don't fill space - html

Question

I am trying to make a 3-column layout but as you can see from the screenshot below the left-most and right-most columns don't span all the way down:
You can find the code at http://codepen.io/vbelenky/pen/hvbEq and I'm going to paste it here, too:
<div class="wrapper">
<div class="primary">
<div class="primary-left">
Primary Left<br>
blah
</div>
<div class="primary-right">
Primary Right
</div>
</div>
<div class="secondary">
Secondary
</div>
</div>
CSS:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
}
.secondary {
width: 200px;
float: left;
background: cyan;
}
.primary {
width: 400px;
float: right;
}
.primary-left {
width: 300px;
float: left;
background: grey;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
}

Answer 1

HTML :
Use follow code that is similar to your query :
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>
CSS :
.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% }
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; }
.center{ margin: 0 100px;background:green; }
http://jsfiddle.net/pfqpR/

Answer 2

Like monkhan said, you'll need to set heights for all of the elements, for example (see on CodePen):
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
height: 40px;
}
.secondary {
width: 200px;
float: left;
background: cyan;
height: inherit;
}
.primary {
width: 400px;
float: right;
height: inherit;
}
.primary-left {
width: 300px;
float: left;
background: grey;
height: inherit;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
height: inherit;
}
The downside of this approach is that you'll need to know what the maximum height is ahead of time (in this case, I picked 40px).

Answer 3

One way to approach this is with absolute positions (instead of floats). It doesn't fit to all needs, but it may fit yours.
http://codepen.io/anon/pen/lLngy
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
position: absolute; top: 0; left: 0; bottom: 0;
}
.secondary {
width: 200px;
background: cyan;
position: absolute; top: 0; bottom: 0;
}
.primary-left {
width: 300px;
background: grey;
position: absolute; top: 0; left: 200px; bottom: 0;
}
.primary-right {
width: 100px;
background: yellow;
position: absolute; top: 0; right: 0; bottom: 0;
}

Answer 4

One approach that wouldn't require you to set any pre-determined heights would be to apply a 3-colour background image to the wrapper (image height can be 50px and "repeat-y").
This way you will have the background colours of the inner divs repeating all the way down to the bottom and it won't matter which inner div is the tallest.
For example:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
background-image: url('3colours.png');
background-repeat: repeat-y;
}

Answer 5

Others said it well. I am just showing another possible way(inconvenient). Inconvenient because it makes the width changing more difficult. Just a background image hack. Use a background image of (wrapper width x 1)px for the .wrapper with colors at appropriate positions. Also remove the background color styles from .secondary, .primary-right and .primary-left.
Here is the fiddle: http://jsfiddle.net/eY9VR/

Answer 6

My coworker gave a solution. The main idea is not to use float property and use display table and table-cell. Please refer to the code for reference. I had to move div.secondary to the top, I commented out the float attribute everywhere, I've declared div.wrapper as display: table and div.secondary, div.primary-left, and div.primary-right as display: table-cell.