How to stop parent div from stretching in IE7

Question

<style type="text/css">

    .parent 
    {
        width            : 200px;
        height           : 50px;
        background-color : #FFFFCC;
        overflow         : visible;
    }

    .child 
    {
         width            : 255px;
         height           : 30px;
         background-color : #CCCCFF;
    }

</style>

<div class="parent">
    <div class="child">Child Content</div>
</div>

It works fine in firefox, but in IE7 the parent div is stretching with the child div. Is there anyway to stop IE7 from stretching the parent div? For some design constraints the divs cannot be positioned.

Answer 1

Just adding <!DOCTYPE> at the start of the HTML solved the issue.

Internet Explorer apparently defaults to 'quirks' mode if no DOCTYPE is declared!

For further information check, CSS quirks mode