Displaying 1 text box and 3 images on the same row - css

Question

Was wondering if i can display 1 text box and 3 images on the same row? All the images are the same size. If possible aswell i'd ideally like a some text underneath each image aswell?
heres the code:
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
.row {
display: inline;
float: left;
}
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
}
.side-bar h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 5px;
}
.side-bar p {
font-size: 14px;
}
.side-bar a {
font-size: 13px;
}
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Ive searched the internet but no luck as yet.
thanks in advance.

Answer 1

There are a number of ways to do this, one example is to float the two child elements:
.side-bar, .recent-wrap {
float: left;
}
This will only work if there is enough room on the parent element for the .side-bar and .recent-wrap to sit next to each other.
Example: http://jsbin.com/poxox/1/edit

Answer 2

CSS:
.row {
width: 250px
}
http://jsfiddle.net/3DCSd/

Answer 3

Here Is a working Fiddle
.row {
display: inline-block; /* changed to inline-block, you don't need
inline and float */
}
.recent-wrap a { /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
The rest of the CSS stayed the same
and HTML I just added the text box
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<input type="text" id="ss" />
<img src="img/body-metrix.png"/>
<img src="img/body-metrix-logo.png"/>
<img src="img/market.png"/>
</div>
</div>

Answer 4

Try this:
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
float: left; /* added */
}
.recent-wrap {
margin-left: 270px; /* added (padding + width) of side-bar */
}
Working Fiddle
This approach let the second container stay in line with the first container even if the window size is small.

Answer 5

Here is the sample with textboxes below image: example