Question

This question is sparked by a very frustrating problem that I find is a theme throughout my web development.

I have an example of this topic to show, in order to supplement my explanation. I have a header on my site and below that header I want a navigation bar, pretty standard. You can see this at http://www.ethoma.com/testhome.php. The header is the only img tag on the page easy to see. Here is the basic html and css structure to that portion of the page.

<div class="container" onclick="hide();">
    <div class="hhshomehead">
    <div class="logowrap">
    <center>
        <img src="/ETPbrand.gif" />
    </center>
        </div>
        <div id="homeopt">
             <ul id="homeoptlist">
             <li id="homeoptnewpost">
         <a class="homeoptanchor" href="/hhsplus_create.php">
            New Post
         </a>
         </li>
         </ul>
         </div>
    </div>
    ...... more html .....
</div>

And the CSS:

.hhshomehead
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    background-color:#ffffff;
    -moz-box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;
    box-shadow: 3px 3px 3px #aaa;
    width:100%;
    border-radius:10px;
}

.hhshomebody
{
    min-height:75%;
    width:100%;
}

.logowrap
{
    display:inline;
}

.homeopt
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    width:100%;
    border-radius:10px;

}

.homeoptlist
{
    display:inline;
    list-style-type:none;
    float:left;
    margin-top:0px;
    margin-bottom:0px;
    padding-left:0px;
}

.homeoptanchor
{
    text-decoration:none;
    color:#1515b5;
    padding-bottom:3px;
    padding-top:3px;
    padding-right:3px;
    padding-left:3px;
}

.homeoptanchor:hover
{
    text-decoration:underline;
}

I know that the class and id notation doesn’t fit right with the CSS and the html. I changed it to display properly in this post. If you look at the resulting code in firebug, you see that the hhshomehead class does seem to contain the logo image, but not the bar below it. I don’t know if there is some critical element I am missing, because from my limited experience, if a tag has children, the tag’s children should be contained by the parent tag. Thanks to anyone who takes the time to view or answer this question — everyone here is always very helpful. (Sorry if the code isn’t displaying quit right, I have only posted here once before)

Answer 1

On the site you link to the #homeoptlist list is floated, which removes it from the document flow. To have the parent div(s) expand to contain it you need to ‘clear’ the float, which can be done by applying a ‘clearfix’ to the parent element. See What methods of ‘clearfix’ can I use?