advanced code snippet search

Posted By

1man on 05/21/07


Tagged

css clear float


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

basicmagic
ggb2g
vali29
stoker


CSS Float Clearing

 / Published in: CSS
 

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

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 
  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. }

Report this snippet  

You need to login to post a comment.