Div displaying weird in IE - there's a surprise!

Question

<style>
body {
    background: #9cdcf9 url(/images/left_cloud.png) bottom left no-repeat;
    font-family:\"Trebuchet MS\";
    padding:0;
    margin:0;
    border:0;
}
#cloud-container {
    width: 100%;
    background: url(/images/right_cloud.png) bottom right no-repeat;
    height: 100%;
}
#plane-container {
    width: 100%;
    background: url(/images/plane.png) top right no-repeat;
    height: 20%;
}
#footer1 {
     width:100%;
     height: 180px;
     background: url(/images/footer.png) bottom center repeat-x;
     vertical-align: bottom;
     text-align: center;
     color: #fff;
     text-shadow: #555 1px 1px 1px;
     font-size: 11px;
}
</style>

Works perfect in FF but makes the page fall to the left and divs overlap - does anyone know what it is in the css that IE is not liking? - bit of a long shot, but hey....

Answer 1

Although it is difficult to tell from your question without the html or image, I think the answer to your problem could be to float your divs.

#cloud-container, #plane-container, #footer1{
    float:left;
}

You might also want to check out this page for common IE CSS issues

Answer 2

Nice information, I really appreciate the way you presented.Thanks for sharing..