Hi,
so I'm having a hard time understanding the circumstances under which a float can have margins collapse through it and how that affects the position of the float. I've included a page that seems to show two different behaviors in the same page.
The red float seems to be positioned before the margins that collapsed through it, whereas the blue ones down below seem to have the margins collapse through them and then be positioned after those margins have collapsed.
Any help would be much appreciated.
Cheers, Ben
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inheritance Tests</title>
<style>
* {
margin: 0px ;
padding: 0px ;
font-family: courier ;
font-size: small ;
}
.test4 {width: 200px; height: 100px; border-style: solid; border-width: 1px;}
.test5 {border: 1px solid red; width: 200px; height: 50px; float: left; }
.floatedRect {
width: 50px ;
height: 50px ;
float: left ;
background-color: #9cf ;
}
.text {
margin: 10px ;
}
</style>
</head>
<body>
<div class="test4">
Normal Flow
</div>
<div class="test5">
Floated
</div>
<div style="margin-top: 100px">
Has a top margin
</div>
<div style="clear: both">
<div class="floatedRect"></div>
<div class="text">some text</div>
<div class="floatedRect"></div>
<div class="text">some text</div>
<div class="floatedRect"></div>
<div class="text">some text</div>
</div>
</body>
</html>