[WSG] Shared Div heights

Tue, 02 Nov 2004 09:21:48 -0800

Hello all,

     Upon having a think on this problem, I don't suppose there's really a solution, but I thought I'd give it some others to see if anyone else has battled this.

I'm currently working on an application in which candidate details are presented in a 2-column format.  The left-side contains content of a fixed length, the right-side contains dynamic lists which will grow as information is collected.  For GUI purposes, each column is in it's own nifty styled box.

The question: is it possible to have the div on the left expand along with the one on the right so that their respective bottoms always align?

I had thought some nesting might offer a solution, but I couldn't conceive a way to nest the right in the left to force it to expand, while still having their borders "appear" to be separate.  There's also the fact that the left is floated instead of the right so that the longer right-side will hold up the borders of the container.

Thanks for any insight.
-kim


Code example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Div Height Test</title>
<style type="text/css">
<!--
#container {
    border: 1px solid #333333;
}
#left {
    float: left;
    border: 1px solid #666;
    width: 49%;
}
#right {
    border: 1px solid #999;
    width: 49%;
    margin-left: 50%;
}
-->
</style>
</head>
    <body>
        <div id="container">
            <p>Main container</p>
            <div id="left">
                <p>left div</p>
                <p>Fixed content always the same size - Donec tellus justo, gravida eu, pharetra eu, pellentesque id, eros. Curabitur augue quam, porta a, ullamcorper in, accumsan at, magna. </p>
            </div>
            <div id="right">
                <p>right div</p>
                <p>Dynamic Content, can change length - Donec tellus justo, gravida eu, pharetra eu, pellentesque id, eros. Curabitur augue quam, porta a, ullamcorper in, accumsan at, magna. Pellentesque condimentum, pede sed molestie tempus, lectus wisi posuere dolor, ac congue turpis nulla et nisl. Cras ornare. </p>
            </div>
        </div>
    </body>
</html>


Reply via email to