Solved

CSS float causes containing div to not extend full height

Posted on 2012-03-20
1
648 Views
Last Modified: 2012-03-20
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.
0
Comment
Question by:dageyra
1 Comment
 
LVL 1

Accepted Solution

by:
dageyra earned 0 total points
ID: 37745334
Just worked it out, we were missing a <div class="clear"></div> after the columns!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question