Create one div with text and image separate? - css

Question

I am currently coding my first website, and one of the elements I have are "story blocks" that are a fixed width and split between images and text, but all in one div. Here is an image for reference: http://i.imgur.com/FAbi4xF.jpg?1.
Let me explain the different parts going on here: an image with a slight black overlay as well as text on the left, and then text describing the story on the right. Currently, I have an inefficient way of creating this element, involving two separate divs and disparate headers for the story titles. Here is the HTML:
<div class="story-image">
<h2 class="story-head">STORY TITLE</h2>
<img src="http://gearpatrol.com/wp-content/uploads/2012/06/microsoft-surface-gear-patrol1.jpg"/>
</div>
<!--this ends the image and title part, begins the text part-->
<div class="story-text">
<h5>Story description.</h5>
</div>
And the CSS:
.story-image {
position: inherit;
background-color: rgba(0,0,0,.39);
margin-left: 58px;
margin-bottom: 4px;
float: left;
overflow: hidden;
width: 220px;
height: 100px;}
.story-head {
position: absolute;
text-align: center;
vertical-align: middle;
color: white;
font-weight: 800;
width:220px;
line-height:100px;}
.story-text {
background-color: white;
width: 200px;
line-height: 100px;
height:100px;
float: left;}
.story-text h5 {
padding-left:8px;
padding-top: 20px;
vertical-align: middle; }
As you can see, it isn't the most efficient way of doing this sort of thing and can cause issues where the two elements break away from eachother (example here: http://i.imgur.com/eBF8Rwa.png). I cannot figure out a way to have one single div that is divided between image and text. Does anyone know of a possible way to do this? Thank you and happy holidays!

Answer 1

Try this:
CSS
.container {
width:400px;
display:inline-block;
height:80px;
margin-right:10px;
padding:0;
}
.left {
display:table-cell;
vertical-align:middle;
width:120px;
margin:0;
padding:0;
height:80px;
background-image:url(URL);
background-size:100%;
}
.right {
display:table-cell;
vertical-align:middle;
width:280px;
padding:0 10px;
}
HTML
<div class="container">
<div class="left">tjen<br>a</div>
<div class="right">tjen<br>a</div>
</div>
JSFiddle demo.
The problem with the two elements becoming break appart in some situations should be gone, and you can change vertical-align:middle to top or bottom if you want the text to have a different position in the div. Hope this helps!