dageyra
asked on
CSS float causes containing div to not extend full height
We have a page with the following setup:
<div id="wrapper">
<div id="col1">
content
</div>
<div id="col2">
content
</div>
<div>
We use float: left on col1 & col2 for positioning. There is a background color applied to "wrapper", however we are finding that the height of "wrapper" does not extend the full height of the content in col1 & col2. We've spent all day trying variations and breaking the markup & styles down, having trouble determining why the container div does not extend.
Here is an example page: http://hovercrafts.d3t.biz/content.html
You can see the main content area has a content and a sidebar. The light-colored box near the content is supposed to be the full height of the content area (it is a container div for the content area).
Any thoughts on what we are doing wrong? I'm sure it's something obvious, but we are missing it. Thanks.
<div id="wrapper">
<div id="col1">
content
</div>
<div id="col2">
content
</div>
<div>
We use float: left on col1 & col2 for positioning. There is a background color applied to "wrapper", however we are finding that the height of "wrapper" does not extend the full height of the content in col1 & col2. We've spent all day trying variations and breaking the markup & styles down, having trouble determining why the container div does not extend.
Here is an example page: http://hovercrafts.d3t.biz/content.html
You can see the main content area has a content and a sidebar. The light-colored box near the content is supposed to be the full height of the content area (it is a container div for the content area).
Any thoughts on what we are doing wrong? I'm sure it's something obvious, but we are missing it. Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.