HTML/CSS a <div> won't go below another one

Question

I have this page where all the div's seem to work and then all of the sudden my last one breaks. I have two divs in my CSS, one being centeredRight and one centeredLeft. They are lined up down the page. But my last div on the left seems to get pushed to the right.

Here is my CSS.

.centeredlistleft {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    border: 2px solid;
    float: left;
    margin-bottom: 25px;
    padding-right: 10px;
}

.centeredlistright {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    border: 2px solid;
    float: right;
    margin-bottom: 25px;
    padding-right: 10px;
}

.body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: purple;
    background-color: pink;
}

And here is my HTML.

<div id="sandrcontainer" class="body" style="width:700px">
   <div id="onsieforbaby" class="centeredlistleft" >
      <h3> Onesie for Baby </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$10.00</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li>It's a boy onesie for a new baby boy. Carter onesies are used. Can ask for specific size. Can also make one for girls using pink.</li>
            </ul>
         </li>
      </ul>
   </div>
   <div id="largetennistowel" class="centeredlistright">
      <h3> Large Tennis Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$14.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>16 x 26 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> Cotton fleece. Very soft. Washes Well. Can be personalized. Check out the photo gallery for examples. Ask seller what color towels are available at time of order.</li>
            </ul>
         </li>
      </ul>
   </div>
</div>
<div id="sandrcontainer2" class="body" style="width:700px">
   <div id="largegolftowel" class="centeredlistleft">
      <h3> Large Golf Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$14.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>16 x 26 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> Golf towel. Elegant. Large white towel. Cotton fleece. Very soft. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order. This towel has a grommet and can be hung on golf bags. Could also make this on fingertipe towel for guest bath or on linen towel for that elegant look.</li>
            </ul>
         </li>
      </ul>
   </div>
   <div id="terrysmalltowel" class="centeredlistright">
      <h3> Terry Small Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$11.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>11 x 18 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> With fringe. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order.</li>
            </ul>
         </li>
      </ul>
   </div>
</div>
<div id="sandrcontainer3" class="body" style="width:700px">
   <div id="contactmerands" class="centeredlistleft" >
      <p> Please make sure to send me an email before any orders. I may not have the color towel you want but can always order more </p>
   </div>
   <div id="smallfingertip" class="centeredlistright" >
      <h3> Small Fintertip Holiday Towel </h3>
      <ul>
         <li>
            Price
            <ul>
               <li>$11.00</li>
            </ul>
         </li>
         <li>
            Size
            <ul>
               <li>11 x 18 (Inches)</li>
            </ul>
         </li>
         <li>
            Description
            <ul>
               <li> Terry small towel with decorated cat for xmas. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are available at time of order.</li>
            </ul>
         </li>
      </ul>
   </div>
</div>

TLDR - ctrl f for "Contactmerands" and please explain to me why this box is getting pushed to the bottom RIGHT of the large golf towel box. It should appear under the large golf towel box just like the rest of the divs.

If you would like to see what I mean you can go to my school web portal where I have the page posted HERE.

Answer 1

When an element is floated, it is essentially removed from the flow of the document. Thus, when a parent element's children are all floated, the parent collapses upon itself as it doesn't have any defined dimensions.

To solve this, you could set either overflow:hidden or overflow:auto on the parent elements. This essentially forces it to contain the children elements, therefore preventing it from collapsing.

Add the following CSS and your problem is solved:

#sandrcontainer,
#sandrcontainer2,
#sandrcontainer3 {
    overflow: hidden;
}

---

Sometimes changing the overflow property will conflict with existing CSS. You could alternatively use the pseudo element clearfix:

.clearfix:after {
    content: '';
    clear: both;
    display: table;
}

Answer 2

You must clear your floats in order to achieve the desired effect.

I suggest using a valid clearfix for this.

You need to declare this in CSS:

.clearfix:after {
    clear:both;
    content:".";
    display:block;
    font-size:0;
    height:0;
    visibility:hidden;
}
.clearfix { display:block; }

Now wrap all your elements that should float next to each other in a DIV and apply the clearfix class:

<div class="clearfix">
    <!-- put your divs here //-->
</div>
<!--put your last div here //-->