Проблемы с динамической шириной 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 следующим образом:

display: inline;

В противном случае цвет фона может вызвать проблемы.

Надеюсь, это поможет.

Answer 2

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

Попробуйте добавить

clear: both;