BillyRayPreachersSon
Programmer
I've got an issue whereby a floated DIV is being pushed down by the height of an adjacent paragraph's top margin.
This happens in Fx 2 and Safari 3, but doesn't happen in Opera 9 or IE 6... so I'm not quite sure which behaviour is correct. All the HTML & CSS validates, so I know there's no issue there.
I've tried many searches on Google and here, and keep coming back to collapsing margins, but I'm not sure if this is a red herring or not. Perhaps I've been staring at this code for far too long!
Anyway, I've made a cut down a test harness to illustrate the problem.
Is this collapsing margins, or is something else at play here that my brain-fart moment won't quite let me see?
Thanks!
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
This happens in Fx 2 and Safari 3, but doesn't happen in Opera 9 or IE 6... so I'm not quite sure which behaviour is correct. All the HTML & CSS validates, so I know there's no issue there.
I've tried many searches on Google and here, and keep coming back to collapsing margins, but I'm not sure if this is a red herring or not. Perhaps I've been staring at this code for far too long!
Anyway, I've made a cut down a test harness to illustrate the problem.
Is this collapsing margins, or is something else at play here that my brain-fart moment won't quite let me see?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<title>Test</title>
<style type="text/css">
#mainDiv {
background-color: red;
}
#sideDiv {
float: right;
width: 195px;
height: 110px;
margin: 0px 10px 5px 10px;
background-color: blue;
}
p {
font-size: 0.8em;
margin: 10px 0px;
padding: 0px;
}
p#title {
font-size: 1.5em;
margin: 0px;
padding: 10px;
}
</style>
</head>
<body>
<div id="mainDiv">
<p id="title">A Title</p>
</div>
<div>
<div id="sideDiv">A Side Box</div>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit. Ut ac mi vitae elit congue iaculis.</a> Vestibulum ultrices interdum ante. Curabitur sit amet erat vel lacus adipiscing porta. Fusce id nibh vitae libero facilisis condimentum. Curabitur augue lectus, pretium non, egestas non, feugiat quis, urna. Ut suscipit lacinia erat. Cras hendrerit fringilla odio. Suspendisse diam. Pellentesque non arcu. Donec varius ligula non tellus.</p>
<p>Phasellus auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras mollis libero sed enim. Nunc et eros. Ut in lectus a lectus luctus condimentum. Proin at tortor eget purus venenatis placerat. Suspendisse id ipsum at enim lacinia porta. Vestibulum nonummy elementum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ullamcorper faucibus arcu. Aliquam luctus nisl hendrerit elit. Duis turpis erat, consequat ac, viverra a, lacinia id, pede. In hendrerit pede vel nisi. Ut vitae sem. Integer eleifend. Ut non pede id purus imperdiet pulvinar. Sed porta ipsum non nibh interdum congue. Nam felis libero, consequat non, feugiat eget, rutrum sit amet, nisl.</p>
</div>
</body>
</html>Thanks!
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
.