IE7 Overlapping Divs

While working to create a simple module, I ran into an issue with IE7 and its apparent desire to overlap elements. Here is my HTML code sample with CSS:

<style type="text/css">
    body {
        padding: 200px;
    }

    .description { 
        padding: 60px;
        background-color: green;
        clear: both;
    }

    .middlebar { 
        background-color: gray; 
    }

    .line {
        background-color: blue;
        clear:both;
    }

    .hey {
        background-colodr: red;
    }
</style>

<body>
    <div class="middlebar">
        <div class="line">
         <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at dolor diam. Aliquam sit amet massa turpis. Suspendisse cursus augue lacus. Suspendisse non velit neque. Nulla aliquam euismod lacinia. Etiam sollicitudin commodo eros, et tincidunt eros consequat lobortis. Proin mollis nisi a arcu euismod at commodo orci rhoncus. Proin sollicitudin erat est, vel mollis dolor. In leo erat, pretium nec bibendum eu, ornare eget diam. Nulla cursus arcu at lacus aliquam pellentesque. Nullam et metus purus, et rhoncus erat. Phasellus ornare elementum neque laoreet tincidunt. 
             </div>
            </div>           
        </div>
    </div>


    <div class="hey">
        Hey<br>
        Hey
    </div>

</body>

Removing the div with class "line" will fix the problem. Adding an extra div will only alter the issue, resulting in a different div overlapping just a single line of the "hey" div at the bottom.

I have already found the fix, as mentioned above, but am seeking a technical explanation to the problem.

ansaurus

tags:

views:

answers:

IE7 Overlapping Divs

related questions