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


Tags: css

Problem :

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>


Solution :

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


    CSS Howto..

    How to set focus int o next tab using tab key?

    How do I centralize an ordered list?

    How to achieve multi column layout with inline images

    How to remove captcha image and it's textbox using css?

    How do I make my React Components to be responsive via css media queries?

    How to move CSS inline with PreMailer.Net whilst using MvcMailer for sending HTML emails

    How to toggle overlay with no body scroll using the same button / div

    How to get background img to show up in :after selector?

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    How do I change the function of a button when the window size changes?

    How to display “a” to full of the line

    How To Prevent Transition Animation To Run Page Load

    How to Toggle Switch - Prices and Config? [closed]

    How to make a horizontal div scroll bar float like a fixed CSS div

    Show separation between newlines in textarea

    how to Put a img and text middle of a div

    How can I achieve a jQuery onhover effect like WordPress post list's edit links?

    show content block on right above the content on right when displaying on mobile

    The input fields do not have the same width. How to resolve this CSS challenge?

    css: how to make circles connected by lines responsive with bootstrap?

    How to disable the collapsing feature in twitter bootstrap 3?

    CSS triangle how to remove white space on the right

    How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How to reload a css background-image inside a directive

    CSS: how to get scrollbars for div inside container of fixed height

    CSS: How to center text over an image, both always centered and proportional regardless of window size

    How can I position some divs inside an unordered list so they line up with the root element of the list?

    How to apply a fixed backgound in fullpage.js