How to have a sidebar on the right in a responsive page with maximum width?

Question

This is the layout I'm trying to achieve with my page:

Basically, the hero and sidebar are two columns on the page. The hero text and image should both be in one div, so they should be treated as one element, like the sidebar. The div with the content ID has max-width: 1150px;. The reason I'm including the hero text and image separately is because I want to point out that the hero image is a div with a background-image, as opposed to an img element.

The elements are structured like this:

<div id="content">
    <div id="hero">
        <div id="heroText">
        </div>
        <div id="heroImage">
        </div>
    </div>
    <div id="sidebar">
    </div>
</div>

The method I'm using right now is where I put float: left; on the div with ID hero, and float: right; on the div with ID sidebar.

When I do this, and resize my browser below 1200px (margins + hero max-width + sidebar width), the sidebar goes below the hero, instead of the hero shrinking below its max-width value 800px.

How can I make the hero start to shrink instead of what happens now, the hero holding up until the browser shrinks below 900px (margins + hero width).

The CSS used currently is below:

#content
{
    margin: 0px auto;
    max-width: 1150px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 25px;
}
#hero
{
    float: left;
    max-width: 800px;
    width: 100%;
}
#heroText
{
    font-family: Lato;
    font-size: 24pt;
    font-weight: lighter;
    height: 150px;
    margin: 0px auto;
    max-width: 600px;
    text-align: center;
}
#heroText p
{
    margin-bottom: 20px;
    margin-top: 0px;
}
#heroImage
{
    background-image: url(heroImage.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 450px;
    text-align: center;
}
#heroButton
{
    margin-top: 90px;
    width: 240px;
}
#news
{
    float: right;
    width: 300px;
}
#newsPane
{
    background-color: #666666;
    border-radius: 10px;
    display: inline-block;
    color: #fff;
    height: 450px;
    width: 300px;
}
#newsPaneText
{
    font-size: 12pt;
    font-weight: lighter;
    max-height: 350px;
    overflow: auto;
    padding-left: 10px;
    padding-right: 10px;
}
#newsPaneText h1
{
    font-size: 18pt;
    font-weight: lighter;
    margin-top: 5px;
}
#newsPaneText small
{
    font-size: 10pt;
    font-weight: bold;
}
#newsPaneButton
{
    margin-left: 60px;
    margin-top: 25px;
    width: 180px;
}
#emailPane
{
    background-color: #e5e5e5;
    border-radius: 10px;
    color: #333;
    display: inline-block;
    height: 130px;
    margin-top: 20px;
}
#emailForm
{
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
}
#emailField
{
    background-color: #fff;
    border: none;
    border-radius: 5px;
    color: #333;
    font-family: Lato;
    font-size: 14pt;
    height: 27px;
    margin-top: 10px;
    padding: 0px;
    width: 280px;
}
#emailSubmitButton
{
    float: right;
    margin-top: 10px;
    width: 120px;
}
#emailFormStatus
{
    float: left;
    font-size: 11pt;
    font-weight: bold;
    margin-top: 15px;
}

Answer 1

FIDDLE

HTML:

<div id="content">
    <div id="news">
    </div>
    <div id="hero">
        <div id="heroText">
        </div>
        <div id="heroImage">
        </div>
    </div>    
</div>

CSS:

#content {
    margin: 0px auto;
    max-width: 1150px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 25px;
}
#hero {
    max-width:800px;
    margin-right:300px;
}
#heroText {
    font-family: Lato;
    font-size: 24pt;
    font-weight: lighter;
    height: 150px;
    margin: 0px auto;
    max-width: 600px;
    text-align: center;
    background:#FF6699;
}
#heroImage {
    background-image: url(heroImage.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 450px;
    text-align: center;
    background:#6699FF;
}
#news {
    float: right;
    width: 300px;
    height:600px;
    background:#66CC33;
}