Topic: DIV columns with equal height (illustration included)

This is what I want to do but cant figure out how to do it:


If Div1 is longer than (Div2+Div3) = Expand Div 2 and press Div3 down (so it remains beneath it)

If (Div2+Div3) is longer than Div1 = Expand Div1

Div3 should be resizable vertically (only upwards), and always stays on bottom with Div1

How can I do this?

Last edited by mdc (2009-06-14 23:59:57)

Re: DIV columns with equal height (illustration included) … pixels.htm

This may help you get started.

Re: DIV columns with equal height (illustration included)

Here's a hackish solution:


<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
    <title>CSS Layout</title>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis sit amet purus laoreet molestie. Vivamus eleifend fringilla purus, ac lobortis nisl sollicitudin non. Donec nec tortor eget nunc rutrum placerat. Nullam hendrerit risus et arcu porta scelerisque. Vestibulum ornare, erat quis rutrum tincidunt, turpis dui mattis libero, eu sollicitudin neque justo eu augue. Aenean faucibus vehicula ante, id laoreet turpis varius eu. Ut suscipit nisl ut mauris convallis rhoncus. Morbi egestas fermentum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vitae nunc arcu. Donec vulputate, ligula ut lacinia posuere, lacus odio tincidunt justo, eu ultricies massa dui sed metus. Ut ut sapien eu nibh posuere faucibus. Ut convallis consectetur nisi, nec iaculis odio euismod ut. Cras odio quam, ullamcorper eget luctus vel, tincidunt vitae nunc. In tortor mauris, rhoncus eu adipiscing nec, pretium in nisi. Duis non ligula mauris. Mauris non ultrices ligula. Donec lorem purus, ultrices a interdum eu, suscipit nec ligula. Curabitur tortor tellus, ultrices quis auctor ut, mattis dapibus lectus. Nunc leo lectus, sagittis sit amet condimentum a, faucibus fermentum lectus.</p>
        <p>Curabitur semper diam in leo congue ut lacinia odio ullamcorper. Nullam libero lectus, dignissim nec elementum nec, dictum non justo. Etiam vel neque augue. Donec vitae enim a lectus mollis ultricies. Morbi laoreet suscipit tincidunt. In blandit varius sapien, vel fringilla purus interdum et. Sed in arcu lacus, convallis lacinia mauris. Mauris auctor pharetra consectetur. Sed eu ante sit amet ante varius sodales. Phasellus tempus ullamcorper tristique. Duis blandit faucibus mauris, sit amet consectetur ipsum volutpat eget. Aliquam porttitor dui at purus accumsan congue quis in massa. In hac habitasse platea dictumst. Duis egestas tellus non ipsum facilisis mollis. Duis porttitor accumsan elit at facilisis.</p>
      <div id="top-right">
        <p>Mauris nunc urna, consequat ac faucibus quis, dapibus quis justo. Sed pulvinar justo nibh, et fermentum tellus. Fusce congue purus sit amet orci cursus sodales. Vestibulum tincidunt auctor lectus et porttitor. Pellentesque et mi nisi. Etiam quis quam tellus. Sed vestibulum dui sit amet est gravida consectetur. Donec quam lectus, gravida ac scelerisque eget, pulvinar vel lectus. Nam sed odio justo. Maecenas blandit luctus nisi in pharetra. Proin sit amet enim at dui ultrices convallis et vel nunc. Vestibulum vitae dolor sapien, vel tincidunt quam. Donec dapibus nunc at turpis accumsan non viverra felis hendrerit. Phasellus ut leo at ligula pretium fermentum. Donec ligula sapien, fringilla ut ornare nec, dapibus et erat. In sollicitudin, sapien a porttitor tempor, nulla metus facilisis arcu, non sollicitudin orci mi et elit. Aliquam rhoncus accumsan accumsan. Nulla facilisi.</p>
      <div id="bottom-right">
        <p>Sed varius, eros ac condimentum volutpat, felis arcu porttitor dolor, non placerat augue nunc vel eros. Aliquam venenatis nulla ac ante rutrum aliquam. Duis sed metus aliquam purus ultricies gravida sit amet et augue. Nulla mauris nisi, bibendum in hendrerit at, placerat vestibulum est. Vivamus lacinia volutpat sem, sed venenatis est mattis eu. Integer a augue leo. Morbi a turpis et mi elementum euismod eu vitae eros. Nulla facilisi. Proin blandit fringilla lobortis. Donec id tortor ullamcorper magna lacinia suscipit. Fusce diam augue, aliquet et dictum sed, laoreet et sapien. Nulla id lorem non justo egestas faucibus id in ante. Etiam sit amet sem non ante lacinia consectetur vel at velit. In hac habitasse platea dictumst. Duis posuere molestie purus tempus tristique. Ut gravida diam a purus ullamcorper et auctor urna rutrum. Aliquam sagittis massa eu turpis ornare blandit. Nullam in risus non est imperdiet pellentesque.</p>

#wrapper {
    position: relative;
    width: 600px;

#left {
    background: red;
    height: 100%;
    width: 300px;

#top-right {
    background: blue;
    width: 300px;
    height: 100%;
    position: absolute; top: 0; right: 0;

#bottom-right {
    background: green;
    width: 50%;
    position: absolute; right: 0; bottom: 0;

This solution only satisfies your first and third conditions, but it may be a start.

The trouble is that #bottom-right is actually on top of #top-right, meaning any text that overflows in #top-right will hide behind #bottom-right. If that's a big problem, I suggest using a table for layout, and using the CSS vertical-align property. It's not a sin to use tables for layout! You could also use divs and set their displays to table, table-row and table-cell if you really hate tables.

Another solution with divs only would require JavaScript. It would calculate the width of Div 1 based on the combined width of Div 2 and Div 3.

If you're interested in either of these, write back and tell me which.

Last edited by Milosz (2009-08-10 23:11:46)

Re: DIV columns with equal height (illustration included)

Have you looked into nifty_columns?