Clearing a floated image without overflow:hidden?

HTML & CSS
1

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:

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:

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

Like so…

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

http://www.websitecodetutorials.com/code/css/clearfix-2012-and-beyond.php

3

I kept tinkering with it and here’s what I came up with:

.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;}