How to properly Align DIV's within DIV

Question

As most people likely do, I have a div split into divs. The internal divs split left and right properly, however the right div seems to follow under the left div:

The html seems free from obvious errors:

 .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> 

I can't tell what's going wrong. I've done this before and it worked fine.

Answer 1

use float:left in caption_left

use box-sizing in caption_left and caption_right

use clear:both for P :The clear property specifies on which sides of an element floating elements are not allowed to float.

 .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; } 

 <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> 

Answer 2

Try this

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;
}