omer omer - 3 months ago 11
CSS Question

My divs cover each other against my will

My divs cover each other which is not intended. I have run it through a debugger and nothing came up...
I'm trying to build a pop-up menu.

This is my html:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="noteBack.css">
</head>
<body>
<div class="container">
<header><span>Note</span></header>
<div class="sub-header"><span>friday 25.7.13 </span></div>
</div>
</body>
</html>


this is my css:

.container{
position:relative;
width:382px;
border:1px solid black;
}
header{
position:absolute;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
position:absolute;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}


any help would be appreciated.

JsFiddle

L-X L-X
Answer

Your positioning system is causing problem ,Try this css

.container{
    /*container position should be absolute*/
    position:absolute;
    width:382px;
    border:1px solid black;
}
header{
    /*header position should be relative*/
    position:relative;
    width:100%;
    height:41px;
    color:white;
    background-color:#de4b4b;   
    font-weight: bold;
    font-size:14px;
    margin:auto;
}
header span{
    display:inline-block;
    padding-left:172px;
    padding-top:14px;
    padding-bottom:14px;    
}
.sub-header{
    /*sub-header position should be relative*/
    position:relative;
    width:100%;
    height:37px;
    background-color:white;
    font-size:10px;
    margin:auto; 
}
.sub-header span{
    display:inline-block;
    padding:bottom:14px;
}
Comments