Vertically align floated elements

HTML & CSS
1

Hello, I’m trying to do this:

737×170 1 KB

(One floated left and the other right)

Now, I know it’s not possible to vertically align floated elements, so how would I do that (other than manually adding some padding)?

Thanks!

2

Hi,

It’s not really possible to do that automatically for floats.

You could use inline-block to vertically align the elements but then you lose the flexibility of floats.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
#outer {
    width:760px;
    margin:auto;
    background:#fcf;
    padding:20px;
}
.left, .right {
    display:inline-block;
    width:200px;
    height:100px;
    background:red;
    color:#fff;
    vertical-align:middle;
    line-height:100px;
    text-align:center
}
.right {
    background:blue;
    height:200px;
    line-height:200px;
    margin-left:350px;
}
* html .left, * html .right{display:inline}
*+html .left, *+ html .right{display:inline}

</style>
</head>
<body>
<div id="outer">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right</p>
    </div>
</div>
</body>
</html>
3

You can actually do it for IE6 and 7 but other browsers don’t have the same behaviour with relative positioning.

We could use display:table for modern browsers but again it’s not the same as floats and precludes wrapping of course. It all depends on the rest of the dynamics you need.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.outer {
    width:760px;
    margin:auto;
    background:#fcf;
    padding:20px;
    overflow:hidden;
    display:table;
}
.wrapl, .wrapr {
    width:200px;
    position:relative;
    top:50%;
    display:table-cell;
    vertical-align:middle;
}
.left, .right {
    height:100px;
    background:red;
    color:#fff;
    line-height:100px;
    text-align:center;
    position:relative;
    top:-50%;
    width:200px;
    float:left;
}
.right {
    background:blue;
    height:200px;
    line-height:200px;
    float:right;
}
.outer2 .left{height:300px;line-height:300px}
* html .wrapl{float:left}
* html .wrapr{float:right}
*+html .wrapl{float:left}
*+html .wrapr{float:right}

</style>
</head>
<body>
<div class="outer">
    <div class="wrapl">
        <div class="left">
            <p>Left</p>
        </div>
    </div>
    <div class="wrapr">
        <div class="right">
            <p>Right</p>
        </div>
    </div>
</div>
<div class="outer outer2">
    <div class="wrapl">
        <div class="left">
            <p>Left</p>
        </div>
    </div>
    <div class="wrapr">
        <div class="right">
            <p>Right</p>
        </div>
    </div>
</div>
</body>
</html>
4

That’s what I suspected. Thank you for your answers, I’ll give them a try right away!