SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Large Gap In DIV with Floated Elements

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Do you mean the big black section to the right? What browser are you using?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, and FF, IE, Safari all show it.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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).

    Code:
    .group:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    }
    Just remove the group class and add a featcontent selector with overflow:hidden

    <div class="featcontent">

    Code:
    #featpadd {
    padding:30px 48px;
    }
    .featcontent {
    overflow:hidden;
    }
    * html .featcontent {
    height:1&#37;;
    overflow:visible;
    }
    :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. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •