Question

I’m having a layer problem where this layer content-3f display over all other layers below it:

<div id="content-3f">
            <div id="content-3-1f"><a href="aboutus.aspx"></a></div>
            <div id="content-3-2f"><a href="experiences.aspx"></a></div>
            <div id="content-3-3f"></div>
        </div>

        <div class="line"><hr class="top" /></div>  

Css:

    #content-3f {
        float: left;
        width: 880px;
        height: auto;
        padding: 10px 0px 10px 26px;
        height: 103px;
        clear:both;
    }

    #content-3-1f 
    {
        float: left;
        width: 269px;
        height: 202px;
        margin:0px 20px 0px 0px;
        padding: 0px;
        background: url('../images/Guided-tour-logo.png') no-repeat left top;
    }

    #content-3-1f a
    {
        width: 269px;
        height: 202px;
        display:block;
    }

    #content-3-2f 
    {
        float: left;
        width: 269px;
        height: 202px;
        margin:0px 20px 0px 0px;
        padding: 0px;
        background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
    }

    #content-3-2f a
    {
        width: 269px;
        height: 202px;
        display:block;
    }

#content-3-3f 
{
    float: left;
    width: 269px;
    height: 202px;
    margin:0px 0px 0px 0px;
    padding: 0px;
    background: url('../images/Taste-chinatown-logo.png') no-repeat left top;
}    

Screenshot:

As you see it goes over the <hr>

How to fix?

Answer 1

the problem is due to the “float:left” on your #content-3f. The float needs to be cleared for this to work. Here’s your solution::

HTML

    <div id="content-3f">
        <div id="content-3-1f"><a href="aboutus.aspx"></a></div>
        <div id="content-3-2f"><a href="experiences.aspx"></a></div>
        <div id="content-3-3f"></div>
    </div>
    <div class="clear"></div>

      <div class="line"><hr class="top" /></div>  ​

Notice the additional div with class “clear” This is used to clear the float in your elements.

Now the CSS

#content-3f {
width: 880px;
height: auto;
padding: 10px 0px 10px 26px;
height: 103px;
}
.clear {
clear:both;
}

The rest of the css remains the same. Hope this helps.

Yes, I agree with gapple. I guess I didnt study your css properly. its the “height:103px” that’s creating the problem. remove that and it works as it is.

But I would like to point out that its always a good idea to clear floats nonetheless.