CODEWITHSUNDEEP
htmlcssinternet-exploreroverflow
Timothy Black
Timothy Black

Reputation: 1

Background not diplaying completely on IE

I have been trying to learn CSS by myself for a few days now, and things have been going well.

While doing so I have encountered a problem and would like your help.

I am trying to build a simple three layer layout, its been working perfectly on FF but not IE.

The CSS is,

#wrapper {
    padding: 5px;
    background-color: yellow;
    margin: 0;
}
#left {
    float :left;
    width: 195px;
    border: 1px solid;
}
#right {
    float: right;
    width: 195px;   
    border: 1px solid;
}
#middle {
    margin-left: 202px;
    margin-right: 202px;
    padding: 0px 3px;
    border: 1px solid;
}

And the HTML is,

<body>
<div id="wrapper">
    <div id="left">
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed.
    </div>
    <div id="right">
    jnvfr
    </div>
    <div id="middle">
    ubrei
    </div>
</div>  
</body>

The background color does not reach till the end of the wrapper. Upon adding "overflow: hidden;", it works properly in FF but the problem stays in IE.

Also could anyone explain the purpose of adding "overflow: hidden" here ?

Any help would be appreciated. Thanks.

Upvotes: 0

Views: 60

Answers (2)

fuxia
fuxia

Reputation: 63556

The height of the container #wrapper corresponds to the height of the tallest element that doesn’t have a float:left|right or position:absolute|fixed.
Remember: floating boxes do not expand their parent element.

You could add a clearfix to #wrapper.

/* For modern browsers */
#wrapper:before,
#wrapper:after  {
    content:            "";
    display:            block;
    overflow:           hidden;
}
#wrapper:after  {
    clear:              both;
}
/* For IE 6/7 (trigger hasLayout) */
#wrapper {
    zoom:               1;
    clear:              both; 
}

Upvotes: 1

Trey
Trey

Reputation: 51

It seems to work fine in IE9 for me: http://jsfiddle.net/bENYd/

Make sure you are using the latest DOCTYPE for your HTML so that IE isn't rendering it in quirks mode or IE7-8 standards.

<!DOCTYPE html>

At the beginning of your HTML document should do it.

Upvotes: 0

Related Questions