It seems like I'm facing a simple problem that needs a solution.
I have two container divs
.topwrap{
position:relative;
top:100px;
background:#00C;
}
and
.lowerwrap{
position:relative;
top:100px;
background:#00C;
}
However, for some unknown reason, .lowerwrap is staying above .topwrap. Inside these containers are images positioned correctly, but I can't seem to get .lowerwrap to go directly below .topwrap.
I apologize if my explanation isn't clear enough.
Best regards
(full code)
/*---------------------------- Header ----------------------------*/
.headerwrap{
position:relative;
}
/* other header styles */
/*---------------------------- Main Work ----------------------------*/
/* main work styles */
/*----------------------------Top ----------------------------*/
.topwrap{
position:relative;
background:#00C;
height:auto;
}
/* other top styles */
/*----------------------------Lower----------------------------*/
.lowerwrap{
position:relative;
background:#00C;
}
<!--===================================================Header===================================================!-->
<div class="headerwrap">
<div class="header">
<img src="images/header.png" />
<div class="logo">
<img src="images/logo.png" />
</div><!--close logo-->
<div class="menu">
<ul class="menutxt">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">PORTFOLIO</a></li>
<li><a href="manga.html">CONTACT</a></li>
</ul>
</div><!--close menu-->
</div><!--close header-->
</div><!--close headerwrap-->
<!--===================================================Top===================================================!-->
<div class="topwrap">
<div class="face">
<img src="images/face.png"/>
</div><!--close face-->
<div class="speech">
<img src="images/speech.png"/>
</div><!--close speech-->
</div><!--close topwrap-->
<!--===================================================Lower===================================================!-->
<div class="lowerwrap">
<p>dsadsadasd</p>
</div><!--close topwrap-->
</body>
</html>