Looking to position a div at the top within its parent div, while leaving space below it unused. The default behavior appears to be the opposite, with the inner div dropping down to the bottom of its container and creating empty space above it.
It seems like a simple task, but I'm struggling to find a solution through Google searches like "div float top" or "div gravity".
Here is the HTML code:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And the corresponding CSS:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
}
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
}
.bonustext {
display: inline-block;
width: 70%;
}
The layout looks good overall, but the logo div (containing the img tag) is stuck to the bottom of its container rather than the top. How can I make it stay at the top?
Appreciate any help in advance.