How to stop one layer going over another - html

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"></div>
<div id="content-3-2f"></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"></div>
<div id="content-3-2f"></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.

Answer 2

Adding the following to your CSS should give you the answer you are looking for.
#content-3-1f,
#content-3-2f,
#content-3-3f {
position:relative;
z-index: 1;
}
Basically z-index tells things which "layer" to live on. The default layer is z-index: 0;
You also need to specify a relative or absolute position for it to take affect.

Answer 3

The more elegant solution is to use display:inline-block rather than float:left on your boxes.
http://www.vanseodesign.com/css/inline-blocks/