Comment aligner correctement DIV dans DIV

Question

Comme la plupart des gens le font probablement, j'ai div div divisée en divs. Les divs internes Split gauche et droit, mais le droit div semble suivre sous la div gauche:

Le html semble exempt d'erreurs évidentes:

.caption{ 
 
    width: 100%; 
 
    position: static; 
 
} 
 

 
.caption_left{ 
 
    position: static; 
 
    width: 65%; 
 
    background-color: #CDCDC1; 
 
    padding: 2px; 
 
    vertical-align: top; 
 
} 
 

 
.caption_right { 
 
    float: right; 
 
    width: 35%; 
 
    background-color: white; 
 
    vertical-align: top; 
 
}

<h4>[2. Previous]</h4> 
 
<div class="caption"> 
 
    <div class="caption_left"> 
 
    Left Material 
 
    </div> 
 
    <div class="caption_right"> 
 
    Right Material 
 
    </div> 
 
</div> 
 
<p>Some other stuff</p> 
 
<h4>[3. Following]</h4>

Je ne peux pas dire ce qui ne va pas. J'ai déjà fait ça et ça a bien fonctionné.

Answer 1

Essayez cette

Demo here

CSS:

.caption{ 
    width: 100%; 
    position: static; 
} 

.caption_left{ 
    position: static; 
    width: 65%; 
    background-color: #CDCDC1; 
    padding: 2px; 
    vertical-align: top; 
    float: left; 
} 

.caption_right { 
    float: right; 
    width: 35%; 
    background-color: white; 
    vertical-align: top; 
} 
p { 
    clear: both; 
} 

Answer 2

utilisation float:left dans caption_left

utilisation box-sizing dans caption_left et caption_right

utilisez clear:both pour P: La propriété clear spécifie de quel côté d'un élément les éléments flottants ne peuvent pas flotter.

.caption { 
 

 
    width: 100%; 
 
    position: static; 
 

 
} 
 

 
.caption_left { 
 

 
    float: left; 
 
    position: static; 
 
    width: 65%; 
 
    background-color: #CDCDC1; 
 
    padding: 2px; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 

 
} 
 

 
.caption_right { 
 

 
    float: right; 
 
    width: 35%; 
 
    background-color: red; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 

 
} 
 

 
p { 
 

 
    clear: both; 
 
\t 
 
}

<h4>[2. Previous]</h4> 
 

 

 
<div class="caption"> 
 
    <div class="caption_left"> 
 
    Left Material 
 
    </div> 
 
    <div class="caption_right"> 
 
    Right Material 
 
    </div> 
 
</div> 
 
<p>Some other stuff</p> 
 

 

 
<h4>[3. Following]</h4>