Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)?
The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it and how I would like it to function. As you can see, the text in the second scenario remains on the same line while in the first scenario it does not.
HTML
<div id="trees">
<div class="tree">
<img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel A' />
<div class="subtext">
Het vergeten kind
</div>
</div>
<div class="tree">
<img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel B' />
<div class="subtext">
Kind en brandwond
</div>
</div>
<div class="tree">
<img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel C' />
<div class="subtext">
Kinderen van de Voedselbank
</div>
</div>
</div>
CSS:
#trees{
width: 100%;
height: 240px;
}
.tree{
position: static;
display: inline-block;
margin: 10px 0;
height: 186px;
color: #860037;
width: 180px;
font-weight: bold;
font-size: 16px;
text-align: center;
}
.tree img{
display: block;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}