Vertical alignment

HTML and CSS XSLT JavaScript Images Soft Etc

Internet Explorer is required to view this example.

	Task:	Align bottom columns of different height not using tables.

For most modern browsers this is no problem. It can be achieved by using CSS display property (through table, table-row, and table-cell values) and vertical-align (specifying bottom). But IE, and even its seventh version, does not have these.

The approach suggested below works for IE 5 and higher regardless of rendering mode, be it quirks, transitional, or strict.

How it looks in the browser

0
1
2
3
4
5

0
1
2
3
4
5
6
7
8
9

0
1
2
3

<style type="text/css">
.columns3
{
display: table;
position: relative;
//overflow-y: hidden;
width: 100%;
}
.columns3 .r
{
display: table-row;
position: relative;
//top: 100%;
width: 100%;
}
.columns3 .a
, .columns3 .b
, .columns3 .c
{
display: table-cell;
//display: inline;
position: relative;
//float: left;
width: 33%;
//margin-right: -100%;
vertical-align: bottom;
}
.columns3 .b
{
width: 34%;
//margin-left: 33%;
}
.columns3 .c
{
//margin-left: 67%;
}
.columns3 .r .r
{
display: block;
//top: -100%;
width: auto;
//width: 100%;
padding: 0 1em;
}
.columns3 .a .r
{
padding-left: 0;
}
.columns3 .c .r
{
padding-right: 0;
}
</style>
<div class="columns3">
    <div class="r">
        <div class="a">
            <div class="r">0<br />1<br />2<br />3<br />4<br />5</div>
        </div>
        <div class="b">
            <div class="r">0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9</div>
        </div>
        <div class="c">
            <div class="r">0<br />1<br />2<br />3</div>
        </div>
    </div>
</div>

Order a design...

Vertical alignment 6 October 2007

How it looks in the browser