SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing a floated image without overflow:hidden?

    On this page > http://craftsman.clickbump.com/about-us/

    I'm trying to account for the condition where the logo (which is floated left) is taller than the header area's initial min-height setting.

    Ideally, I want it to behave as if I had put overflow:hidden on the parent container:

    Code:
    header[role=banner]{overflow:hidden}
    However, that would be a perfect fix but for the menu flyouts which are then rendered partially hidden (since they are in the overflow region).

    Any ideas how to accomplish this? I want the header area to extend as far down as the content dictates. I'd also like the nav menu to stay anchored to the bottom of header, but that is asking too much at this point perhaps.

    To temporarily simulate the taller logo image, you can use this css added onto the inspector palette's "source" view with the css stylesheet styles.v64.css:

    Code:
    .header img.logo{height:150px;width:100px}

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Like so...

    .contain:after {
    content:'';
    display:block;
    clear:both;
    }

    http://www.websitecodetutorials.com/...and-beyond.php

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I kept tinkering with it and here's what I came up with:

    Code:
    .header img.logo{height:150px;width:100px}
    
    header[role=banner]:after{
        content:'.';
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
        }
    .menu.nav{clear:left;position:relative;}


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
  •