CODEWITHSUNDEEP
csslayout
DavidTonarini
DavidTonarini

Reputation: 951

3 column css how to make the columns even?

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?

Upvotes: 1

Views: 277

Answers (3)

Miljan Puzović
Miljan Puzović

Reputation: 5820

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/

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22161

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)

Upvotes: 4

chrx
chrx

Reputation: 3572

Add the following to your stylesheet:

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

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

Upvotes: 0

Related Questions