A Quick Note on Float: Right
Frankly I never thought I’d blog about this, but over the last several days I have had this question posed twice and found this issue in a released product.
When you want to wrap text around an element and position that element on the right, you do the obvious and float that element right using CSS. Just about everyone gets this. The problem you’re running into, though is that your floated element is below the text instead of at the top with the text wrapping it. The solution I see over and over is to use a negative top margin. Wrong answer. That won’t hold up as the height of the text changes. Here’s some example HTML:
<html>
<head>
<style type="text/css">
#wrapper {
border: 2px solid #000000;
padding: 5px;
width: 300px;
}
#rightCol {
background-color: #ffff00;
float: right;
width: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pede. Cras et dolor. Nulla lorem felis, euismod eu, adipiscing non, auctor ut, mi. Suspendisse potenti. Phasellus at turpis. Integer augue lorem, rutrum eget, malesuada nec, facilisis eu, dui. Praesent condimentum nunc non ligula. Sed est dolor, luctus nec, accumsan in, accumsan ac, libero. Proin pharetra augue at felis. Etiam et nibh. Praesent lobortis sem consectetuer turpis. Nullam velit eros, dictum imperdiet, pretium in, gravida sit amet, leo. Nulla nisl urna, vehicula et, varius non, sollicitudin non, nisi. Duis commodo lacus vel dolor.</p>
</div>
<div id="rightCol"><p>Right Float</p></div>
</div>
</body>
</html>
Here’s what this HTML renders as:
This element is incorrectly floated
You’ll immediately notice the yellow, floated box is at the bottom of the page. Here’s the answer to the kicker, the gotcha, the problem people run into.
You have to put the element into the document before the text you want wrapping around it. This may seem counter-intuitive to some, but trust me on this. Here’s the HTML:
<html>
<head>
<style type="text/css">
#wrapper {
border: 2px solid #000000;
padding: 5px;
width: 300px;
}
#rightCol {
background-color: #ffff00;
float: right;
width: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol"><p>Right Float</p></div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pede. Cras et dolor. Nulla lorem felis, euismod eu, adipiscing non, auctor ut, mi. Suspendisse potenti. Phasellus at turpis. Integer augue lorem, rutrum eget, malesuada nec, facilisis eu, dui. Praesent condimentum nunc non ligula. Sed est dolor, luctus nec, accumsan in, accumsan ac, libero. Proin pharetra augue at felis. Etiam et nibh. Praesent lobortis sem consectetuer turpis. Nullam velit eros, dictum imperdiet, pretium in, gravida sit amet, leo. Nulla nisl urna, vehicula et, varius non, sollicitudin non, nisi. Duis commodo lacus vel dolor.</p>
</div>
</div>
</body>
</html>
…and the associated rendered document:
A properly implemented right float
You’ll immediately see that the floated element is exactly where we intended it to be. On the top and right.
Curious as to why it does this? Well, we’re dealing with block level elements here. Because of that they won’t render inline. Since they won’t render inline, if the first element isn’t the floated element when it renders it fills the available space, not leaving any room for the next element. When the floated element is rendered first the second element can be correctly rendered around it.
Happy floating.
Just like old-school align=right… The problem with this route however, is that the ‘float right’ content is an aside to the main text… Thus is a text reader, it should go AFTER the main text, not before it – perhaps this is the reason people are fudging with negative top margins?