CSS overflow property and text wrap around float  

Joined:
02/21/2009
Posts:
158

March 28, 2010 22:09:34    Last update: January 11, 2011 21:23:03
This CSS behavior looks weird to me and I don't know if it's by the spec. It doesn't make sense to me at all.

Using this markup:
  • Code
  • Demo
<!doctype html>
<html>
<body style="width:250px;">
	<div style="float:left;background:#ddd;padding:5px;margin:5px;">
	    The Float
	</div>
	<div id="contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum.
	</div>
</body>
</html>


the page is rendered like this:



i.e., the text of the non-floating div wraps around the floating div.

However, by simply adding an overflow property to the non-floating div (doesn't matter what the value is, anything except inherit), the text no longer wraps!

HTML:
  • Code
  • Demo
<!doctype html>
<html>
<body style="width:250px;">
	<div style="float:left;background:#ddd;padding:5px;margin:5px;">
	    The Float
	</div>
	<div id="contents" style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum.
	</div>
</body>
</html>


Page:


Share |
| Comment  | Tags