CODEWITHSUNDEEP
cssdynamichtml
FizzBuzz
FizzBuzz

Reputation: 568

Problems with Dynamic Div Width

From everything I've read, my CSS should have the left hand text resize to fit the remaining space, but it doesn't seem to work in Chrome (ironically IE9 renders something right for once).
Bit of a noob with CSS so there's undoubtedly something I'm missing (and stuff that I don't need).

The website can be seen here;
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;
}

Upvotes: 1

Views: 603

Answers (2)

jwchang
jwchang

Reputation: 10864

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

Try to add 

clear: both;

Upvotes: 0

David Esteves
David Esteves

Reputation: 1604

The issue appears to be with the

float: left;

in #content. If you remove this you get the desired effect in all browsers. You'll also need to set the display on #content to be:

display: inline;

Otherwise your backround-color will cause issues.

Hope this helps.

Upvotes: 1

Related Questions