<p>I can't for the life of me find a way to make this work.</p>

<p>If I have 3 divs (a left sidebar, a main body, and a footer), how can I have the sidebar and main body sit next to each other without setting their positions as "absolute" or floating them? Doing either of these options result in the footer div not being pushed down by one or the other.</p>

<p>How might I accomplish this regardless of what comes before these elements (say another header div or something)?</p>

<p>In case it helps, here's an illustration of the two cases I'm trying to allow for:</p>

<p><img src="https://i.stack.imgur.com/zjEzC.jpg" alt="alt text"></p>

<p>Here's a simplified version of the HTML I currently have set up:</p>

<pre><code>&lt;div id="sidebar"&gt;&lt;/div&gt;
&lt;div id="content"&gt;&lt;/div&gt;
&lt;div id="footer"&gt;&lt;/div&gt;
</code></pre>

You need to specify the footer to clear the float:
```
```
#footer{
 clear: both;
}
```
```
This forces it under floated elements.
Other options for clear are left and right.