Solved

CSS float causes containing div to not extend full height

Posted on 2012-03-20
1
647 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Font Arial Narrow 1 26
FIx alignment of two texts 1 26
Host asp.net pages 5 24
Error in script 11 43
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

948 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now