How do i sit 2 divs left and right of eachother

Question

So what i am trying to accomplish is sitting <div id="box"> left of and <div id="box2"> right of inside the container of <div id="content"> I must mention they cannot be position:absolute; unless there's a way to make sure the height:auto; div doesn't lose it's height because my experience position:absolute; seems to be floating above the other content.

here's a direct link to show you whats happening. keep in mind this is a pure css layout with a php backbone

Direct Link to 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>

Answer 1

You want to "float" your divs. Set a width on the divs, float them left or right, and be sure to clear after them so you don't get unintended fill-in by other elements. Use statements like the following within your CSS classes/IDs.

float:left;
width:WHATEVERpx;

...

float:right;
width:WHATEVERpx;

...

clear:both;

Answer 2

You are looking for a three column layout. This is more complex than you may think. You may get it easily with a simple example, but if you start adding headers or footers and having the columns expand with content,it will get tricky.

I suggest reading this article to get some ideas.

Answer 3

What float does is gives your element priority placement to the left-most edge of its containing div, at the expense of other inline elements on the page. It was originally intended for things like images placed alongside text (so the text could wrap around them).

If you want to float two elements next to each other, you can do so using float:left; and float:right;, and contain them in another div so other elements don't try to squeeze around them (or make sure the next element on deck has the clear:both; on it). In their containing div (if you're using one), use overflow:auto to automatically expand it to fit around those divs, as well. Make sure you also give the floating divs a width, otherwise they will automatically expand to fill the width of their parent.