CODEWITHSUNDEEP
htmlcss960.gs
Behrooz A
Behrooz A

Reputation: 125

footer overlap on content

I have an HTML structure like this :

<div id="content" class="container_12">
    <div id="right" class="grid_3 alpha">
        <div id="menu_right"></div>
        <div id="adv"></div>


    </div>
    <div id="main_c" class="grid_9 omega">s</div>


</div>
<div id="footer"></div>

but content overlaps on footer , I tried but nothing happened.

here is the CSS :

#footer {
    border-top: 4px dashed white;
    padding-top: 20px;
    margin-top: 40px;
    background-image: url("bannerbg.jpg");
}


#menu_right, #adv { width: 100%;
    min-height: 300px;
    background-color: #e3e3e3;
    margin-bottom: 10px;

    }


#main_c{
    height: 500px;
    background-color: #e3e3e3;
}
#content{
   // its blank
}

and it shows like this : like this

what should I do ? I tried clear:both between content and footer :-?

Edit : view this online , http://barcodes.ir/sap

Upvotes: 0

Views: 442

Answers (2)

lu1s
lu1s

Reputation: 5831

Quick solution: add z-index: 1000; like this to the #footer css set of rules. Like this:

#footer{
    z-index: 1000;
    ...
    ...
}

Your z-index must be higher than any other content. Apparently those boxes have higher z values, so you need to rebase them.

Upvotes: 0

Gustavo F
Gustavo F

Reputation: 2206

It seems like the css positioning, maybe you should try relative position in the footer.

See this link to learn more information about positioning.

Upvotes: 1

Related Questions