如何在最大宽度的响应式页面中右侧有一个侧边栏？

Question

这是我试图用我的页面实现的布局：

基本上，英雄和侧边栏是页面上的两列。英雄文本和图像都应该在一个div中，因此它们应该被视为一个元素，如侧边栏。 div ID为content的{​​{1}}为max-width: 1150px;。我分别包括英雄文字和图片的原因是因为我想指出英雄形象是div background-image，而不是img元素。< / p>

元素的结构如下：

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

我现在使用的方法是将float: left;放在标识为div的{​​{1}}上，将hero放在标有float: right;的地方div。

当我这样做，并将我的浏览器调整到1200px（边距+英雄sidebar +侧边栏max-width）以下时，侧边栏会低于英雄，而不是英雄缩小到{{1}以下} width。

如何让英雄开始缩小而不是现在发生的事情，英雄坚持到浏览器缩小到900px以下（边距+英雄max-width）。

目前使用的CSS如下：

800px

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;
}