I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than the one before it, the next item won't float under the shorter box immediately. Instead, it will float at the end point of the longer box on the left side, causing a large white space that disrupts the overall look of the layout.
For reference, here is the fiddle link: http://jsfiddle.net/xMzb8/
Below is the code snippet:
HTML
<div class="accountBox">
<div class="AB-innerFull">
<p class="AB-title">Registration Form 1</p>
<div class="AB-innerBody" style="height: 200px;"></div>
</div>
<div class="AB-innerHalf">
<p class="AB-title">Registration Form 2</p>
<div class="AB-innerBody" style="height: 400px;"></div>
</div>
<div class="AB-innerHalf">
<p class="AB-title">Registration Form 3</p>
<div class="AB-innerBody" style="height: 122px;"></div>
</div>
<div class="AB-innerHalf">
<p class="AB-title">Registration Form 4</p>
<div class="AB-innerBody" style="height: 560px;"></div>
</div>
<div class="AB-innerHalf">
<p class="AB-title">Registration Form 5</p>
<div class="AB-innerBody" style="height: 120px;"></div>
</div>
<div class="AB-innerHalf">
<p class="AB-title">Registration Form 6</p>
<div class="AB-innerBody" style="height: 50px;"></div>
</div>
<div class="AB-innerHalf">
<p class="AB-title">Registration Form 7</p>
<div class="AB-innerBody" style="height: 230px;"></div>
</div>
</div>
CSS
* {
color: RGB(0, 0, 0);
font-family: Calibri;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body{
padding: 5px;
}
.accountBox {
background: RGBA(200, 230, 240, 0.6);
border: 1px solid RGB(20, 100, 150);
float: left;
margin: 10px 29px;
padding: 5px;
width: 870px;
}
.AB-innerHalf, .AB-innerFull {
background: RGB(255, 255, 255);
border: 1px solid RGB(200, 200, 200);
box-shadow: 0px 0px 2px RGB(220, 220, 220);
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
margin: 5px;
padding: 40px 20px 20px;
position: relative;
}
.AB-innerHalf {
width: 425px;
}
.AB-innerFull {
clear: left;
width: 860px;
}
.AB-innerBody {
background: RGB(255, 0, 0);
clear: left;
float: left;
width: 100%;
}
.AB-title {
border-bottom: 2px dotted RGB(20, 100, 150);
color: RGB(20, 100, 150);
font-size: 16px;
font-weight: bold;
height: 25px;
left: 0;
line-height: 25px;
margin: 5px 10px;
padding: 0 5px;
position: absolute;
text-transform: uppercase;
top: 0;
}