Text and image side by side

[jp12]

I'm trying to get the text with the video link on the left side and the image to the right side. This almost works but the text is below the image and not aligned center to it.
Please assist.....

HTML

<div class="belowheaderwrap">

 <div class="belowheaderelement">Explore the benefits of using <a style="color:black; font-size:22px; font-weight:bold;" class="fancybox-media" href="#">watch our video</a>
 </div>
 <img class="belowheaderelement" src="images/reportbutton.png" /> 
</div>

CSS

.belowheaderwrap {
 
 width:700px;
 display:table;
 
}
.belowheaderelement {
 text-align:left;
 width:50%;
 display:table-cell;
}

[brandozz]

This should work:

<div class="belowheaderwrap">

<div class="content-left">
<p>Explore the benefits of using</p>
<a style="color:black; font-size:22px; font-weight:bold;" class="fancybox-media" href="#">watch our video</a>
</div>

<div class="content-right">
<img class="belowheaderelement" src="images/reportbutton.png" />
</div>
</div>

.belowheaderwrap {
width:700px;
overflow: auto;
}


.content-right {
float: left;
width: 50%;
background: yellow;
}

.content-left {
float: left;
width: 50%;
text-align: center;
background: red;
}

[jp12]

thanks, that worked but in IE 10 there are two scroll bars present on the right side of the image.

[jp12]

overflow:none removed the ie 10 scrollbars

[brandozz]

"overflow: hidden" would also work on the container or parent div but I'm not sure what the size of the image is and it may produce undesirable results. If you used overflow: hidden, which would be typical in this case, you might have to mess with the div sizes of content-left and content-right

[brandozz]

Quick note: using "overflow: none" is actually an invalid property and really isn't working as a container. You should probably add "overflow: hidden" and adjust the size of the content-right and content-left divs.

As an example if you added a div under "belowheaderwrap" it would appear behind it because "belowheaderwrap" has no height since it isn't containing anything.

[jp12]

got it, thank you...

[Hoople]

Using a P tag vs the DIV for your text may achieve the intended result with less CSS.

YMMV