CODEWITHSUNDEEP
htmlcsscss-float
Ken Ingram
Ken Ingram

Reputation: 1608

How to properly Align DIV's within DIV

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:

enter image description here

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.

Upvotes: 0

Views: 208

Answers (2)

Ehsan
Ehsan

Reputation: 12969

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>

Upvotes: 2

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

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

Upvotes: 1

Related Questions