3 column css how to make the columns even?

Question

I have this template: http://demitogroup.com/dgroup/sample.html

My problem is that I cannot make the three columns even at the end. Actually the problem is only the left column, as it keeps shorter than others and the colour just ends there.

I´ve tried several solutions, but always something gets wrong. I thought that clear: both; could help, but it doesn’t do anything.

Any ideas?

score 4 · Accepted Answer · edited May 23 '17 at 12:29

4

You can use display: table-cell on each column and display: table on parent (*). That will force your "cells" to have the same height and stay on the same row.

(*) Add table-layout: fixed on this same parent as you want precise widths to be applied, otherwise the browser will also adapt to the content of each "cell".

Fiddle: http://jsfiddle.net/PhilippeVay/sFBGX/2/

Compatibility is IE8+ and fallback for IE6/7 if needed is exactly the same as for inline-block

Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)

edited May 23 '17 at 12:29

Community

1
1

answered Apr 03 '13 at 22:58

FelipeAls

21,711
8
54
74

Why can't you add height: 707px; to #secondaryContent? – mgrahamjo Apr 03 '13 at 23:02
Because it's unneeded? What if your content is taller? I never know the height of columns, except in rare occasions. – FelipeAls Apr 03 '13 at 23:05
@mgahamjo: If the content is generated dynamically you won't know what height to hardcode. – Andrew Shepherd Apr 03 '13 at 23:05
It should be added that `display: relative` and `float: ...` will have to be removed from the children elements for this to work, but otherwise this is the best solution (IMHO) – Hubro Apr 03 '13 at 23:09

score 0 · Answer 2 · answered Apr 03 '13 at 23:02

0

Add the following to your stylesheet:

#content {
  overflow: hidden;
  clear: both;
}

#tertiaryContent, #secondaryContent {
  padding-bottom: 100000px;
  margin-bottom: -100000px;
}

answered Apr 03 '13 at 23:02

chrx

3,524
1
15
17

A hack solution. Would work badly with borders, background gradients etc. – Hubro Apr 03 '13 at 23:03

score 0 · Answer 3 · answered Apr 03 '13 at 23:24

I know that jQuery is not tagged, but in case that every other CSS solution fails, here is jQuery code to support this. (because of strange hrml markup on the site, with floating and other stuff)

I created this jQuery code

$(document).ready(function(){
        var left = $("#left").height();
        var right = $("#right").height();

        if (left<=right) $("#left").css("height", right);
        else $("#right").css("height", left);
});

for this HTML markup

<div id="container">
    <div id="left">Short one</div>
    <div id="right">Long one</div>
<div>

with this CSS

#container {
    width: 100%;
}

#left {
    background: red;
    width: 100px;
    float: left;
}

#right {
    background: red;
    width: 100px;
    float: right;
}

http://jsfiddle.net/cQUep/1/

I prefer the pure css solution above, but +1 for the solution that might be useful some day — DavidTonarini, Apr 04 '13 at 22:47

3 column css how to make the columns even?

3 Answers3