Home › How to increase CSS container height to accomodate floats

How to increase CSS container height to accomodate floats 

James
Joined:
02/21/2009
Posts:
130

September 23, 2009 03:56:46    Last update: September 23, 2009 03:56:46
This trick came from quirksmode.

With this CSS: 
div.container {
	border: 1px solid #000000;
}

div.left {
	width: 45%;
	float: left;
}

div.right {
	width: 45%;
	float: right;
}

the container DIV height remains 0 no matter how tall the contained floats are. Two tricks were offered:
  1. Add a DIV after the two floats with clear:both
  2. Change the container CSS to: 
    div.container {
	border: 1px solid #000000;
	overflow: auto;   /* hidden and scroll also works */
	width: 100%
}


Share |
| Comment  | Tags