Deux colonnes de hauteur égale seulement css (pas d'affichage: table, table-rangée, table-cellule)

Dans le CSS, je peux faire quelque chose comme ceci:
http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png

Mais je n'ai aucune idée de comment changer cela à quelque chose comme:
http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png

La hauteur n'est pas fixe

Merci de m'aider à le faire! Merci à tous par avance!

source d'informationauteur Max Popkin | 2012-06-11

  1. 26

    J'utilise cette, pur css.

    Le code html:

    <div id="container" class="holder">
    <div id="column-one" class="even-height">TEXT</div>
    <div id="column-two" class="even-height">TEXT</div>
</div>

    Le css:

    .holder {
   overflow: hidden;
   clear:    both;
}
.holder .even-height {
   float: left;
   padding-bottom: 100000px;
   margin-bottom:  -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }

    Les colonnes peuvent être de n'importe quelle largeur que vous voulez réellement. De toute façon, super simple et cross-browser convivial.

  2. 9

    Hauteur Variable wrapper avec une égale hauteur des colonnes

    HTML

    <section class="wrapper">
    <section>a</section>
    <aside>b<br>c</aside>
</section>

    CSS

    /* Set @max-column-height to greater than the maximum height of the tallest column */
.wrapper {
    overflow:hidden;
    margin:10px;
}
.wrapper > section {
    background:red;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}
.wrapper > aside {
    background:orange;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}
  3. 2

    J'aime broh/manonatelier est mieux (+1 pour chaque), mais si vous voulez vraiment une solution qui est totalement indépendante de la quantité de contenu à l'intérieur, je voudrais utiliser la vieille technique de la conception de crochets: http://jsfiddle.net/GTY8P/

    ...Utilise plus le balisage et les feuilles de style CSS.

  4. -1

    Faire un wrapper avec un div comme ceci :

    <div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

    Appliquer un style comme ça :

    .wrapper {
    height: 400px;
}

.wrapper .box{
    float: left;
    height: 100%;
    width: 200px;
    background-color: red;
    margin-right: 10px;
}​

    N'ai pas essayé, mais les travaux.

    MODIFIER jsFiddle : http://jsfiddle.net/NXjk4/

  5. -1

    Cochez cette

    HTML

    <div class="box" >
    <div class="box1">TEXT</div>
    <div class="box2">TEXT</div>
</div>​

    CSS

        .box{
    background:#000;
    height:60px
}

.box1{
    float: left;
    background-color: #fff;
    margin: 10px;
    text-align:center;
}
.box2{
    float: left;
    background-color: red;
    margin: 10px;
    margin-left:5px;
    text-align:center;
}​

    Voir la démo ici : http://jsfiddle.net/X3UY9/1/