Trying to make the header height auto - css

Question

My website here is a wordpress website but I believe the only thing I need to fix for an issue I'm having is the header height. The home page as a rotating banner which is 403px high and then all other pages have a header image of 303px high. I'm just trying to get the header height to be auto so the #container will automatically hug the bottom of the banner no matter it's height.
CSS
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
What else should there be so the #container realizes that the header is there?
UPDATE:
NEW HTML
<div style="clear:both;"></div>
</div><!-- end of container-->
NEW CSS
#banner {
width: 960px; /* same with already defined */
height: 403px;
margin: 0 auto;
}
The only thinkg i did slightly differently was place the navigation under the header instead of the banner as it was underneath the banner of which i don't want. It looks the same however the doesn't seem to be doing anything differently then what I had previously. I still have that gap on the blog page under the banner.
I appreciate the help Zuul. I do think I have a bit more to go and then we can figure this out. Thanks!

Answer 1

The issue with the layout doesn't lay over the header tag, there are some elements positioned weirdly that are causing several problems:
This is a list of things to do in order to rectify the layout flow:
1)
Remove the <div id="banner"> from within the <nav id="main-navigation">.
The <nav id="main-navigation"> is set to height:70px and the slider is far taller than that.
Place it as a child of the <header> or after the <header> and before the <div id="container">.
e.g,
<header>...</header>
<div id="banner">...</div> <!-- here is better -->
<div id="container">...</div>
2)
After the first step, you can then remove from your #banner the following CSS:
REMOVE
#banner {
left: 50%;
margin-left: -480px;
position: absolute;
top: 69px;
width: 960px;
z-index: 1;
}
ADD
#banner {
width: 960px; /* same with already defined */
height: 403px;
margin: 0 auto;
}
3)
The step 01 and 02 should fix the #banner position along with the header height issue.
Now remains fixing the #container that contains floated elements and should be cleared at the end.
Here, your current class clearfix will not work, contains to many declarations, I would suggest:
<div id="container">
<div id="main">...</div>
<aside>...</aside>
<div style="clear:both;"></div>
</div>
Adding that new <div style="clear:both;"></div> at the very end of the #container will allow the float to be cleared and the document flow to resume normally.
EDITED
First phase is done, now the only thing you need to do is to remove the height from the #banner, and the gap will go away.
#banner {
width: 960px; /* keep this */
margin: 0 auto; /* keep this */
}

Answer 2

add a div with a style of clear:both just before your container div ends. This will allow to make the container div's height according to the contents inside it. You can make a class named clear and inside it you can put this style so that you can use this class anywhere in your website.