I'm having trouble getting my layout working correctly, I have a main div and a sidebar div these are both float: left if the screen size is resized or if its viewed on screen smaller that what I have designed on (1920x1080) then the sidebar div drops below the main content.

I tried placing a wrapper around each div, but this has no effect.

    <div id="header">       
        [Header]        
    </div>

    <div id="content">      
        [Content]       
    </div>

    <div id="sideBar">
        [SideBar]
    </div>

    <div id="footer">
        [Footer]
    </div>

body
{   
    width: 100%;
    color: #000000;
    background-color: #000000; 
    margin: 0;
    padding: 0; 
}

#header
{
    width: 100%;
    height: 110px;
    background-color: #336699;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;   
}

#content
{
    float: left;
    margin-left: 50px;
    width: 70%;
    height: 700px;  
    margin-top: 40px;       
    padding: 30px;
    background-color: #FFFFFF;
    margin-bottom: 40px;
}

#sideBar
{
    float: left;    
    margin-left: 50px;  
    width: 15%; 
    height: 400px;
    margin-top: 40px;
    padding: 30px;
    background-color: #FFFFFF;  
}

#footer
{
    width: 100%;
    height: 80px;
    background-color: #174555;
    margin: 0px;
    padding: 0px;
    color: #ffffff; 
    clear: both;
}

Basicly both div's should resize until a certain size is reached, then scrolling should be enabled. I'm pretty sure I have done something simple wrong but i'm not much of a design person.

Example can be shown here : Link

Thanks for any advice :)