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 */
}