How can I vertically align two floated divs?

Question

I have two divs inside a container div. One need to float left the other float right. They also both need to be vertically centered inside their parent. How can I achieve this?

<div id='parent'>
    <div id='left-box' class='child'>Some text</div>
    <div id='right-box' class='child'>Details</div>    
</div>

If no float is applied to either they vertically align to the middle with this css

.child{ display:inline-block; vertical-align:middle; }

However adding #right-box{ float: right; } causes the children to lose their vertical alignment. What am I doing wrong?

Thanks guys

Answer 1

here is the online demo of the solution you needed

it was made with this html:

<div id='parent'>
    <div id='left-box' class='child'>Some text</div>
    <div id='right-box' class='child'>Details</div>    
</div>

and this css:

#parent {
    position: relative;

    /* decoration */
    width: 500px;
    height: 200px;
    background-color: #ddd;
}

.child {
    position: absolute;
    top: 50%;
    height: 70px;
    /* if text is one-line, line-height equal to height set text to the middle */
    line-height: 70px;
    /* margin-top is negative 1/2 of height */
    margin-top: -35px;

    /* decoration */
    width: 200px;
    text-align: center;
    background-color: #dfd;
}​

#left-box { left: 0; }
#right-box { right: 0; }

Answer 2

You can try the display:table and display:table-cell styles.
Check this site out for more details http://www.quirksmode.org/css/display.html

NB: if you want the parent div height to be a percent (like 100%), then it will be relative to the height of it's container. If the container is the body, then you will have to set the body and html's height as well, like to 100%.

Here's an example of what the code might look like:

<div id='parent'>
    <div id='left-box'>Some text</div>
    <div id='right-box'>Details</div>    
</div>​

<style>
body,html{
    height:100%;   
}
#parent{
    border:1px solid red;
    display:table;
    height:100%; 
    width:100%;        
}
#left-box{ 
    background-color:#eee;
    display: table-cell;
    vertical-align:middle;
    padding:3px;
    width:50%;
}
#right-box{ 
    background-color:#dddddd;
    display: table-cell;
    vertical-align:middle;
    padding:3px;
    width:50%;
}
​</style>