Advanced Search

CSS Float Clearing

/ Published in: CSS
Save to your folder(s)
Say you want a containing block with 2 floating elements to expand around the floating element, usually this wouldn't happen since the container has no height because the floating elements are out of the usual flow.

The method below fixes this problem.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. div.container {
  2. 	border: 1px solid #000000;
  3. 	overflow: hidden;
  4. 	width: 100%;
  5. }
  6.  
  7. div.left {
  8. 	width: 45%;
  9. 	float: left;
  10. }
  11.  
  12. div.right {
  13. 	width: 45%;
  14. 	float: right;
  15. }

URL: http://www.quirksmode.org/css/clearing.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.