How do I vertically align text next to img in Genesis columns? - html

Question

I've researched similar questions and tried using display:table-cell; inline-block; vertical-align:middle all over the place, but I can't get this to work. In this sample Genesis theme page (please look), it demos the use of columns using 'one-half' and 'first' CSS classes. Using DevTools/Inspector you can go in and add <img src="http://placehold.it/140x240"> before the paragraph like I've shown below. Maybe there's something in the Genesis columns that's making this harder than it should be, or more likely I'm missing the obvious.
In that first column I need the img to appear to the left of the text, while the text is vertically aligned. I can't seem to find out the combination that will do it. NB I do know the height of the image - it's not dynamic. I could use spans if easier in stead of P.
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>

Answer 1

The key here is declaration of the widths. p by default will have 100% width even if you set the display to inline-block, so you need to set it up with something like this:
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
</p>
</div>
Note the classes added to the children, with the CSS now applied:
.OneHalfItem {
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
}
.OneHalfText {
width:calc(100% - 140px);
padding:10px;
}
Now it lines up nice and dandy, with the use of calc. Couple of things:
This works easily because the picture is a fixed width; if the imgsize is variable, you need to declare it's width as well (a percentage or something), then calculate the p size based on that
I eliminated the white space between the end of the img tag and the beginning of the p tag, because by default inline-block will add in a 4px margin to the right of each element. By removing the white space between the tags, it eliminates that empty margin.
Note that this will only work for IE9+ (and real browsers, of course), so if you need to support IE8- then you'll need to do the same kind of width calculation via JS, but easily done.
Here is a jsFiddle to show it working.