I'm encountering an issue with the display inline block property. I have two divs that I want to position next to each other, but there's a strange gap above the second div (#store_header_text) that I can't seem to explain. I've tried removing the position: absolute and relative on the surrounding divs, but it doesn't solve the problem.
Here is my HTML code:
<div id="store_header">
<div id="store_header_logo">
<a href="http://www.amazon.co.uk">
<img class="store_header_img" src="/images/tiles/amazon.png" title="Amazon"></img>
</a>
</div>
<div id="store_header_text">
Amazon Coupons & Deals
</div>
</div>
And here is my CSS:
#store_header {
width:100%;
border:1px solid #ccc;
background-color:#fff;
border-radius:3px;
padding:5px;
}
#store_header_logo {
height: 100px;
width: 200px;
position: relative;
border:1px solid black;
display: inline-block;
}
#store_header_logo img {
max-height: 90px;
max-width: 180px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
position: absolute;
border:1px solid black;
}
#store_header_text {
height:100px;
width:300px;
line-height: 90px;
padding-left:20px;
font-size:25px;
font-family: 'Roboto', sans-serif;
font-weight:400;
color:#004d6e;
display: inline-block;
border:1px solid black;
}