Equal Height Columns in HTML with DIsplay:Table

Equal Height Columns in HTML with DIsplay:Table

by Nirvanachain

HTML

<div class="row-fluid">
    <div class="span2">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    
    <div class="span10">
        test
    </div>
</div>

CSS

.row-fluid {
    display: table;
}
.row-fluid .span2 {
    border: 1px solid blue;
    display: table-cell;
}
.row-fluid .span10 {
    border: 1px solid red;
    height: 100%;
    display: table-cell;
}