Media query to move heading to right of image - html

Question

I have a site that needs the placement of an h3 moved depending on the screen size.
The html is currently a table like this:
<table><tr><td><img src="someimage"></td><td><h3>Heading</h3></td></tr></table>
On smaller screens, I would want the h3 to appear above the image, with the image full width, so I start with:
<div class="heading-image">
<h3>Heading</h3>
<img="someimage">
</div>
That just works, but on larger screens I want the h3 to drop to the right of the image, which would be at 50% of the screen:
.heading-image img { max-width: 50% };
.heading-image h3 { max-width: 50%; float:right };
Now the h3 drops next to the image on the right hand side. But then it comes to the age old problem of vertically centering multi-line text inside a div, where the height of the div is unknown (dependent on the size of the image and the current screen width), and the length of the text is unknown (these are entered into a CMS).
I have tried a variety of approaches found on the internet, but I am just not getting my head around it. I tried making both the img and h3 a table-cell to get me back to my original approach but I can't get the alignment to work.

Answer 1

Here's the code. Just change the size you want to collapse in the #media-query.
Working fiddle: http://jsfiddle.net/Hv6x3/
HTML
<div class="heading-image">
<h3>Headline text goes here...</h3>
<img src="http://placeimg.com/640/480/tech" alt=""/>
</div>
CSS
.heading-image img {
float: left;
max-width: 50%;
height: auto;
}
.heading-image h3 {
float: right;
width: 50%;
max-width: 50%;
text-align: left;
}
#media (max-width: 600px) {
.heading-image {
text-align: center;
}
.heading-image img {
float: none;
max-width: 100%
}
.heading-image h3 {
float: none;
max-width: 50%;
}
}

Answer 2

for vertical-align....use display:table-cell
make sure the parent div is set as display:table
jsfiddle demo
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
#media only screen and (min-width : 600px) {
.heading-image {
width:100%;
height:100%;
margin:0;
padding:0;
text-align:center;
display: table;
}
.heading-image .img {
float:left;
height:100%;
}
.heading-image .h3 {
float:right;
display: table;
height:100%;
}
.heading-image .h3 h3 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
#media only screen and (max-width : 600px) {
.heading-image {
width:100%;
margin:0;
padding:0;
text-align:center
}
.heading-image .img {
width: 100%;
}
.heading-image .img img {
width:auto;
height:auto;
}
.heading-image .h3 {
width: 100%;
vertical-align:middle;
}
}