I have a div with position absolute and float left and right. I am trying to add an image below this div.
The issue I am facing is that the image is overlapping with the first div. I want the image to be displayed below the first div without any overlap.
Check out this link for reference.
<div class="top">
<div class="left" align="center">
<p><a href="#">Sell</a></p>
<p><a href="#">Download App</a></p>
<p><a href="#">24x7 Customer Care</a></p>
</div>
<div class="right" align="center">
<p><a href="#">Track Order</a></p>
<p><a href="#">Help</a></p>
<p><a href="#">About</a></p>
<p><a href="#">Contact</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="logo_menu">
<p><img src="assets/images/logo.png" alt="" title="" /></p>
</div>
.clearfix {
clear:both;
}
/* Top */
.top {
width:100%;
height:auto;
background:#E9E9E9;
position:absolute;
padding:10px;
}
.top .left {
float:left;
}
.top .left p {
display:inline-block;
margin:0 10px 0 10px;
font-size:12px;
}
.top .left p a {
text-decoration:none;
color:#B5B5B5;
}
.top .left p a:hover {
text-decoration:underline;
color:#FD6123;
}
.top .right {
float:right;
}
.top .right p {
display:inline-block;
margin:0 10px 0 10px;
font-size:12px;
}
.top .right p a {
text-decoration:none;
color:#B5B5B5;
}
.top .right p a:hover {
text-decoration:underline;
color:#FD6123;
}
/* Menu and Logo */
.logo_menu {
width:100%;
height:auto;
}