inline-block not laying out horizontally like they should be - css

Question

The blocks are being laid out vertically (one on top of the other), I'm trying to use inline blocks to place 2 blocks side by side. I wanted to use inline-block instead of floats which do work. The steps div class is the container for both inline blocks. Am I missing something?
img.down_image {
display: inline-block;
vertical-align: middle;
width: 465px;
}
div.steps {
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
display: inline-block;
vertical-align: middle;
width: 400px;
height: auto;
padding: 0 0 0 40px;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
the html:
<div class="steps">
<div class="down_image">
<img src="pic1.png" class="down_image" />
</div>
<ol>
<li>sdsdgsdgsdgsdgsdgsdg</li>
<li>sdgsdgsdgsdgsdg install Java.
</li>
<li>sdgsdgsdgsdgsdg</li>
</ol>
</div>

Answer 1

Add the following in your style
div.down_image {
display: inline-block;
}
You made the image inline, but the container div is not inline!
If you still have same issue, check the widths! Total width of 400 (ol) + 465 (img) = 865px might be more than the area you are using.
This code works fine, when widths are fixed. jsfiddle

Answer 2

Add white-space: nowrap; to div.steps and change html:
div.down_image {
width: 60%;
display: inline-block;
background-color: #ded;
}
div.steps {
white-space: nowrap;
width: 100%;
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
background-color: #dde;
display: inline-block;
vertical-align: middle;
width: 30%;
height: auto;
padding: 0 0 0 5%;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
<div class="steps">
<div class="down_image">
</div><ol>
<li> sdsdgsdgsdgsdgsdgsdg</li>
<li> sdgsdgsdgsdgsdg install Java.</li>
<li> sdgsdgsdgsdgsdg</li>
</ol>
</div>
Notice glued </div><ol>
Note: make sure to add div.down_image { display: inline-block; }
Also, you can try to give position: absolute; to image's div and ol.