I am working on arranging <div id="box">
to the left and <div id="box2">
to the right inside the container of <div id="content">
. It's important that they are not set to position:absolute; as it causes issues with the height. I have found that using position:absolute; results in the div floating above other content.
If you'd like to see the issue in action, you can view a direct link here. Please note that this is a purely CSS layout with PHP as the backbone.
Click Here to See the Issue
<div id="content">
<div id="box1">
<h2>Company Information</h2>
<img src="images/photo-about.jpg" alt="" width="177" height="117" class="aboutus-img" />
<p color="FF6600">
some content here
</p>
</div>
<div id="clear"></div>
<div id="box" style="width:350px;">
<h2>Availability</h2>
<p>
some more content here
</p>
</div>
<div id="clear"></div>
<div id="box2" style="width:350px;float:left;overflow: auto;">
<h2>Our Commitment</h2>
<p>
some content here
</p>
</div>
</div>