css - 动态 Div 宽度的问题

Question

从我读过的所有内容来看，我的 CSS 应该 调整左侧文本的大小以适应剩余空间，但它似乎在 Chrome 中不起作用(具有讽刺意味的是，IE9 只渲染了一次正确的内容).
对 CSS 有点菜鸟，所以毫无疑问我缺少了一些东西(以及我不需要的东西)。

网站可以在这里看到；
baradineholdings.com.au

HTML;

<div id="internal">
    <div id="image">
        <img src="" alt="" width="563" height="422"/>
    </div> <!-- end #image -->
    <div id="content">
        <p> A whole heap of content goes here. </p>
    </div> <!-- end #content -->
</div> <!-- end #internal -->

CSS；

#internal {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

#image {
    width: 563px;
    height: auto;
    float: right;
    right: 0px;
    top: 0px;
    margin: 0;
}

#content {
    display: block;
    height: auto;
    background-color: #f1f1f1;
    float: left;
    margin-right: auto;
    position: relative;
}

Answer 1

问题似乎与

float: left;

在#content.如果删除它，您将在所有浏览器中获得所需的效果。您还需要将#content 上的显示设置为:

display: inline;

否则你的背景颜色会导致问题。

希望这对您有所帮助。