How can I vertically align my div inside another div and keep them side by side?

Question

I've got three divs inside another div.

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left;">
       <input type='checkbox' />
   </div>
<div>

I need them to appear side-by-side, so I've set them as float:left.

The trouble is that they appear like this...

Incorrect layout image

...with the text vertically aligned at the top. I need it to be in the middle.

N.B. I've found a post about a very similar issue, but it seems that floating causes it to fail.

The solution you linked to works just fine. http://jsfiddle.net/Bb4Ye/1/ — JJJ, Apr 23 '13 at 12:51

score 1 · Answer 1 · answered Apr 23 '13 at 12:59

1

You can achieve that easily with tables

       <table>
            <tr>
                <td> <b>Text1</b></td>
                <td><img src="smiley.gif" alt="Smiley face" height="42" width="42"></td>
                <td><input type='checkbox' /></td>
            </tr>
        </table>

Or you really need to stick with divs? Hope this helps. :)

answered Apr 23 '13 at 12:59

Jude Duran

2,195
2
25
41

Yes. Trouble is these divs are already in a table. And nested tables come with their own issues. – Urbycoz Apr 23 '13 at 13:08
I see. So how about replacing float with display: inline? – Jude Duran Apr 23 '13 at 13:11
Yes, good call. I'm upvoting your answer anyway, since it works. – Urbycoz Apr 23 '13 at 13:20

score 1 · Answer 2 · answered Apr 23 '13 at 13:01

Use the following code: (I advise you to avoid tables as much as possible)

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left; line-height: 42px;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left; line-height: 42px;">
       <input type='checkbox' />
   </div>
<div>

Jude Duran · Accepted Answer · 2013-04-23T13:13:15.980

If you really need DIVs, you can use the "display: inline;" instead of float. And then vertical-align: middle; to make the elements centered.

    <div id="parentDiv" style=" ">
       <div id="childDiv1" style="display: inline-block; vertical-align: middle;">
           <b>Text1</b>
       </div>
       <div id="childDiv2" style="display: inline-block; vertical-align: middle;">
           <img src="smiley.gif" alt="Smiley face" height="42" width="42">
       </div>
       <div id="childDiv3" style="display: inline-block; vertical-align: middle;">
           <input type='checkbox' />
       </div>
    </div>

Hope this helps.

Yes, I really do need to use DIVs. And that solution is perfect. Thanks. — Urbycoz, Apr 23 '13 at 13:17

score 0 · Answer 4 · answered Apr 23 '13 at 12:48

0

For them to appear side by side, you don't need them to float, just set them as they are. As for the image, just add a CSS property for it: vertical-align:middle and that should align it in the middle of the text.

answered Apr 23 '13 at 12:48

casraf

21,085
9
56
91

Fine, if that's all you need on your page. If it's not, and the space is limited, they would wrap. – Urbycoz Apr 23 '13 at 13:10
They would wrap with float too. – casraf Apr 23 '13 at 17:38

How can I vertically align my div inside another div and keep them side by side?

4 Answers4