Having trouble with floating elements? Need to ensure that box 3 aligns under box 1 when resizing the browser window?
Use this HTML template:
<div class="box">
<p>box 1</p>
<p>box 1</p>
<p>box 1</p>
</div>
<div class="box">
<p>box 2</p>
<p>box 2</p>
<p>box 2</p>
<p>box 2</p>
<p>box 2</p>
</div>
<div class="box">
<p>box 3</p>
<p>box 3</p>
<p>box 3</p>
</div>
And add this CSS style:
.box {
width:80px;
float:left;
border:1px solid slateGrey;
margin:0 0 0 10px;
padding:10px;
}
Check out a live example on Fiddle.
If you've tried using the clear property without success, don't worry - there are other solutions available.