2 boîtes de la même hauteur (pourcentage)

Question

Comment créer deux boîtes (flottantes côte à côte) de même hauteur. Je veux créer des boîtes de hauteur 40% du conteneur/fenêtre?

Answer 1

See the Example Here

---

Si tel est ce que vous cherchez, voici plus:

CSS:

#parent{ 
    width:205px; 
    height:200px; 
    border:1px solid #000000; 
    overflow:auto; 
    } 

    #child1{ 
    height:40%; 
    background:#00ff00; 
    float:left; 
    } 

    #child2{ 
    height:40%; 
    background:#0000ff; 
    float:left; 
    } 

Les Points importants:

• Le float:left permet d'aligner les deux boîtes côte à côte
• Le height est spécifié dans % pour les deux boîtes enfants afin qu'ils héritent de leurs parents.

HTML:

<div id="parent"> 
    <div id="child1"> 
     This is first box 
    </div> 
    <div id="child2"> 
     This is second box 
    </div> 
    </div> 

Answer 2

L'utilisation de% comme hauteur est relative à la hauteur de votre conteneur parent. Par conséquent, vous devez déclarer la hauteur de votre conteneur parent. Jetez un oeil à ce tutoriel: Equal Height Columns.

Answer 3

Cela devrait être une solution simple pour vous. Voici mon exemple:

jsfiddle

HTML:

<div class="wrap"> 
    <div class="left"> 
     Content 
    </div> 
    <div class="right"> 
     More content 
    </div> 
</div> 

CSS:

.wrap 
{ 
    width: 400px; 
    height: 500px; 
    border: 1px solid #000; 
} 

.left, .right 
{ 
    float: left; 
    width: 45%;a 
    height: 40%; 
    margin: 2%; 
} 

.left 
{ 
    border: 1px solid #f00; 
} 

.right 
{ 
    border: 1px solid #00f; 
} 
​ 

Answer 4

La question mentionne spécifiquement flottante, et il y a eu plusieurs bonnes réponses pour cela, mais je pensais il pourrait être utile de poster an answer that doesn't use floats dans le cas où la mention de flottant était accidentelle:

.wrapper { 
    width: 400px; 
    height: 400px; 
    outline: 1px solid #000; 
} 
.wrapper div { 
    display: inline-block; 
    width: 198px; 
    height: 40%; 
    background: #66c; 
} 
.wrapper div:first-child { 
    background: #6c6; 
} 

<div class="wrapper"> 
    <div>This is the first box</div> 
    <div>This is the second box</div> 
    <p>Some other content</p> 
</div> 

Il ne fonctionne pas actuellement dans WebKit, mais je suppose que c'est un bogue et il y aura une solution de contournement, j'étudie. Si vous avez besoin de travailler dans IE 8 < ajouter un commentaire conditionnel:

<!--[if lt IE 8]> 
<style> 
    .wrapper div { zoom:1; *display:inline;} 
</style> 
<![endif]-->