Page not extending (with floats)

[Michdd]

I have a main div, which has the main background and stuff. Then within this main Div I have two sections, a main area and a side bar. Main has a float to the left, and sidebar has a float to the right. However when I place excessive content in either of these sections the page doesn't grow. Unless I place it directly in the main section.

 

Basic concept:

 

<div id="main">
<div id="main_left">//Has left float
//Anything placed here doesn't make 'main' grow'
</div>

<div id="main_right">//Has right float
//Anything placed here doesn't make 'main' grow'
</div>

</div>

 

Is there any way to fix this?

[Axeia]

place a <div style='clear: both'></div> after the end of the main_right div.

[gevans]

Also type clear fix into google. You'll find many options, I made a few tweaks and have made my own, but it is usually a very handy class to have in your default stylesheet

[haku]

#main
{
  overflow:auto;
}