Vertical align within DIV, with a block element inside the div - html

Question

This has always driven me crazy and never found the right answer.
I want to achieve the following:
http://juicybyte.com/stack-overflow.jpg
Meaning, I want to have an image on a div on the left, and text that nicely vertical-aligns itself depending on how much content there is. Height of the text div can be fixed.
However, everything is no go.
<div id="widgetWhite">
<div id="widgetWhiteIcon">
<img src="/images/iconWhiteIconTn.png" alt="White Icon" />
</div>
<div id="widgetWhiteContent">
<p>I would love it if this worked.</p>
Download PDF
</div>
</div>
The CSS:
#widgetWhiteIcon {
width: 82px;
margin: 0 10px 0 20px;
display: inline-block;
vertical-align: middle;
}
#widgetWhiteContent {
width: 108px;
font: normal normal 11px/14px Arial, sans-serif;
height: 110px;
display: inline-block;
vertical-align: middle;
}
#widgetWhiteContent a {
color: #f37032;
}
Don't really care about IE6.0, but IE7.0 is required unfortunately.
Thanks for any help!

Answer 1

Here, I put together a solution for you based on the site I linked. I didn't bother mapping your existing css into it, but I think you will get the idea.
http://jsfiddle.net/M3h6v/5/
<div class="ie7vert1">
<img src="http://placehold.it/120x150" alt="White Icon" />
<div class="ie7vert2">
<div class="ie7vert3">
<p>I would love it if this worked.</p>
Download PDF
<br style="clear: both;" />
</div>
</div>
</div>
.ie7vert1 {
display: table;
#position: relative;
overflow: hidden;
border: 1px dashed gray;
float: left;
width: 100%;
}
.ie7vert2 {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.ie7vert3 {
#position: relative;
#top: -50%;
border: 1px dashed red;
}

Answer 2

The vertical-align property has two prerequisites for use:
The elements you are trying to vertically-align must be siblings.
The elements you are trying to vertically-align must not be block-level elements.
That being said, this is actually quite easy to solve:
<div id="widgetWhite">
<div id="widgetWhiteIcon">
<img src="http://placehold.it/100x100" alt="White Icon" />
</div><div id="widgetWhiteContent">
<p>I would love it if this worked.</p>
Download PDF
</div>
</div>
Note that the closing div for #widgetWhiteIcon and the opening div for #widgetWhiteContent are touching: </div><div id="widgetWhiteContent">. This allows for you to control the spacing between these two elements, since normally any space between inline elements in your markup is shown in the presentation.
Edit: You could equivalently set font-size: 0 on #widgetWhite without worrying about whitespace. font-size is inherited in the children elements, so you would need to explicitly set that after, like so: #widgetWhite { font-size: 0; } #widgetWhite * { font-size: 12px; }
CSS:
p { margin: 0; }
#widgetWhite > div {
vertical-align: middle;
display: inline-block; }
#widgetWhiteContent { margin: 0 0 0 4px; }
#widgetWhiteContent a {
margin: 1em 0 0;
display: block; }
Preview: http://jsfiddle.net/Wexcode/DcWB8/

Answer 3

You have to set a fixed height for the wrapper div (div#widgetWhiteContent) first in order for vertical-align to work. To keep everything in div#widgetWhiteContent vertically aligned with div#widgetWhiteIcon, both div's should be at the same height.
So a good solution would be to set a height for the outer div, and then set the height of both child div's to 100%.
Your CSS goes like this
<style>
#widgetWhite {
height: 110px;
}
#widgetWhiteIcon {
width: 82px;
margin: 0 10px 0 20px;
display: inline-block;
height: 100%;
}
#widgetWhiteContent {
clear: left;
width: 108px;
font: normal normal 11px/14px Arial, sans-serif;
height: 100%;
display: inline-block;
vertical-align: middle;
}
#widgetWhiteContent a {
color: #f37032;
}
</style>