There are 3 divas. The example in the figure. alt text How can CSS use the height of blocks to end at the same level? UPD:

The result should be:

alt text

    5 answers 5

    Here is an example using table layout.

    .one { border: 2px dotted red; width: 250px; } .two { border: 2px dotted blue; width: 250px; } .three { border: 2px dotted orange; width: 250px; } 
     <table> <tr> <td class="one"> orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis ornare blandit. Donec sapien risus, volutpat vel nulla ac, porta condimentum nunc. Vestibulum hendrerit ac enim at malesuada. Etiam a neque eros. Maecenas sagittis tellus nisl. Etiam posuere bibendum fringilla. Mauris tortor velit, s tortor velit,elit. nunc. Vestibulum hendrerit ac enim at malesuada. Etiam a neque eros. Maecenas sagittis tellus nisl. Etiam posuere bibendum fringilla. Mauris tortor velit, s tortor velit,elit. fringilla. Mauris tortor velit, sollicitudin id arcu ac, cursus imperdiet quam. Etiam bibendum diam fringilla magna condimentum, quis vestibulum elit cursus. Sed molestie ipsum et mi sollicitudin cursus. </td> <td class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis ornare blandit. Donec sapien risus, volutpat vel nulla ac, porta condimentum nunc. Vestibulum hendrerit ac enim at malesuada. Etiam a neque eros. Maecenas sagittis tellus nisl. Etiam posuere bibendum fringilla. Mauris tortor velit, sollicitudin id arcu ac, cursus imperdiet quam. Etiam bibendum diam fringilla magna condimentum, quis vestibulum elit cursus. Sed molestie ipsum et mi sollicitudin cursus.</td> <td class="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis ornare blandit. Donec sapien risus, volutpat vel nulla ac, porta condimentum llicitudin id arcu ac, cursus imperdiet quam. Etiam bibendum diam fringilla magna condimentum, quis vestibulum elit cursus. Sed molestie ipsum et mi sollicitudin cursus.</td> </tr> </table>

    • And how will this help? max-haight is, as far as I know, the maximum height beyond which the div will not expand. How this property will help here, I do not understand. Did you mean min-height? Well, also not suitable. - Frontender
    • I apologize, I was mistaken, I mean min-height, yes. Well, once and it does not help, then maybe you just did not try to set the height strictly? - htmlcoder
    • Well, the fact is that not a hard height, not min-heyt do not help, since the text from the database is displayed. And we do not know in advance how much text there will be in each of the draws. - Frontender
    • And you just need them to just "end on the same level"? Or do they need to be on the same level (both above and below)? - htmlcoder
    • Well, of course, to start and end. Added a picture in question. - Frontender

    If you do not really care about compatibility with old browsers, then I advise you to use flexible boxes ( more ). A great tool that solves many problems with layout, including yours. An example .

    • What browsers are compatible with? - Frontender
    • Sorry, support is only in Firefox (> 18) and Chrome (> 22). IE and Safari only support an outdated draft with a different syntax (display: flexbox). So for now this is not an option. - dzhioev

    it is enough to set the parent display: table and the child display: table-cell . We must not forget that the margin in the tables does not work.

     .parent{ display: table; width: 100%; } .child { display: table-cell; background-color: tomato; width: 33.3333%; } 
     <div class="parent"> <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventore similique deserunt dolor. Repellat suscipit, magni enim quo incidunt porro culpa nemo soluta, expedita aspernatur cumque quidem vitae, minima sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventore similique deserunt dolor. Repellat suscipit, magni enim quo incidunt porro culpa nemo soluta, expedita aspernatur cumque quidem vitae, minima sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi inventore similique deserunt dolor. Repellat suscipit, magni enim quo incidunt porro culpa nemo soluta, expedita aspernatur cumque quidem vitae, minima sequi!</div> <div class="child">Ab sint autem porro delectus consectetur. Optio corporis consequatur eveniet, debitis iusto incidunt. Facilis veritatis voluptatibus quibusdam dolorem sed illo sit vero asperiores commodi. Suscipit, adipisci, veritatis. Nam, blanditiis, voluptate?</div> <div class="child">Provident aliquam, sunt, minus labore cum est quae in qui officiis impedit accusamus necessitatibus odit, amet harum delectus. Enim delectus, aspernatur quia nulla nam est quo dolore quisquam consectetur nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, velit! Provident aliquam, sunt, minus labore cum est quae in qui officiis impedit accusamus necessitatibus odit, amet harum delectus. Enim delectus, aspernatur quia nulla nam est quo dolore quisquam consectetur nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, velit!</div> </div>

      JS will do?

       // Назначьте всем div-ам одинаковый класс и передайте его в эту функцию. function alignmentByHeight(classname) { var divs = $("div ."+classname); var max = 0; for(var i=0; i<divs.length; i++) { max = Math.max(max, $(divs[i]).height()); } $(divs).css('min-height', max+'px'); }
      • No, javascript is not suitable. - Frontender

      And it is possible to make an option compatible with old browsers (without tables).
      Here is an example on jsFiddle

      • one
        I do not want to upset you, but in your example it seems that the text goes beyond the diva, doesn’t it? - htmlcoder
      • I forgot to check the case when intentionally squeezing the jsFiddle window in width. Corrected code: ( jsfiddle.net/venzell/deynK/1 ) - VenZell