Large Gap In DIV with Floated Elements

HTML & CSS
1

I have a large black gap that runs in line with the menu in this demo. Can someone tell me why this is happening?

U:demo
P:demo

2

Yes, and FF, IE, Safari all show it.

3

That worked splendidly!

Thank you, Rayzur! I applied the same principle to the element below it and it fixed it’s gap as well.

Thank you again!

4

Hi,
The problem is the .group class here -
<div class=“featcontent group”>

The clearfix styles you have hooked to it are clearing the left column (menu).

.group:after {
[COLOR=Red]clear:both;[/COLOR]
content:".";
display:block;
height:0;
visibility:hidden;
}

Just remove the group class and add a featcontent selector with overflow:hidden

<div class=“featcontent”>

#featpadd {
padding:30px 48px;
}
[COLOR=Blue][B][COLOR=Black].featcontent[/COLOR][/B] {
overflow:hidden;
}[/COLOR]
[B]* html .featcontent[/B] {
[COLOR=Blue]height:1&#37;;
overflow:visible;[/COLOR]
}
:first-child + html .group {
.featcontent p {
margin-right:312px;
}
.featcontent img {
display:inline;
float:right;
}

You can use the group class on other elements that are below the left column. Just keep in mind, it is doing just what you are telling it to, clearing BOTH floats.

EDIT:
You could also just leave the group class in the html and style .group in the css with overflow:hidden to contain floats, that would leave your original IE6 workaround functional.

5

Do you mean the big black section to the right? What browser are you using?