Take a look at the following:
<div class="container">
<div class="content">
<div class="space">
</div>
<div class="item">
DIV1
</div>
</div>
</div>
CSS:
.container {
position:relative;
height: 100%;
width:100%;
}
.content {
height:100%;
border:1px solid red;
}
.space {
margin-top:80px;
border:1px solid blue;
}
.item {
position: absolute;
top:80px;
left:50px;
font-size:20px;
font-weight:bold;
color: #999999;
text-align: center;
}
The only change is in the border statement in the content class but there is a difference in the output.
Could you explain what is going on?