div how to make customize an item layout - html

Question

I'm trying to play around with div to get the item layout that I need, but I can't achieve what I'm looking for
.skills-container
{
height:50px; /* something like 50px */
padding:5px;
}
.skill-pic
{
width:48px;
height:48px;
}
.skill-content
{
}
.skill-content p
{
}
.progress
{
}
HTML :
<div class="skills-container">
<div class="skill-pic">
<img src="img/ps.png" alt="Klematis" width="48" height="48">
</div>
<div class="skill-content">
<p>Photoshop</p>
<div class="progress">
<div class="progress-bar progress-success">
</div>
</div>
</div>
</div>

Answer 1

You need to add float: left; to the .skill-pic css.
EDIT: Someone also pointed out this doesn't get exactly what you need. You'll also need to add a border attribute to the css of the elements like so:
border: solid black 1px; and replace the 1px with the size of the border you need... You'll have to play with it.
Try this as your CSS: it should work and you can tweak it as such... Working JSfiddle here:
.skills-container
{
display:inline-block;
border: solid black 4px;
}
.skill-pic
{
margin:2px;
float:left;
width:45px;
height:45px;
}
img
{
border: solid black 3px;
height:45px;
}
.skill-content
{
height:45px;
width:200px;
border: solid black 3px;
float:left;
margin:2px 2px 2px 5px;
}
.skill-content > div
{
margin:2px;
border: solid black 1px;
}
.progress
{
margin:2px;
border: solid black 1px;
}