CODEWITHSUNDEEP
css
Dan
Dan

Reputation: 57941

CSS: How to force floating blocks to have equal (100%?) height

Simply draw the situation:

What I have:

----------------------------------
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX    
XXXXXXXX
XXXXXXXX
----------------------------------

What I would like to have:

----------------------------------
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
XXXXXXXX     XXXXXXXX     XXXXXXXX
----------------------------------

I don't want to use display: table-cell, because it's not cros-browser;

I don't want to use <table> either (if it's possible).

I would like to LEARN: what is the trick of forcing floating blocks fit the contaier height ?!

PS: I try this way (this LESS code is not working, you may not pay too much attention to it)

#container {
    width: 100%;
    overflow: hidden;

    div {
        float:left;
        width: 33.3%; /*only three of them. It's strange, but this is what works: 31%*/
        min-height: 100%; /*unfortunutely not works */
        height: 100%;
        background: red;
    }
}

<div id="container">
   <div><div>
   <div><div>
   <div class="last"><div>
</div>

Upvotes: 1

Views: 101

Answers (3)

ikbenivo
ikbenivo

Reputation: 66

Does the container has a height? If not, that may be the reason for the 100% not working.

Upvotes: 1

Idrizi.A
Idrizi.A

Reputation: 12060

Check this demo here: http://jsfiddle.net/FDm9F/3/embedded/result/

If you zoom, you can see that the table's height is always 100%

HTML

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>        
    </tr>
</table>​

CSS

html, body{
    width: 100%;
    height: 100%;
}
table{
    width: 300px;
    height: 100%;
    min-height:100%;
}
table tr td{
    width:33.3%;
    height: 100%;
    background: #F00;
    border-left: 1px solid #000;
    text-align:center
}​

Upvotes: 2

BenM
BenM

Reputation: 53248

For a pure hack-free solution, you could wrap the columns in a second container, as discussed here:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 2

Related Questions