div height same as container div [Archive]

markivs

01-14-2003, 12:32 AM

This thing is really bugging me. Can someone help me out ?

ok here's the problem.

I have 2 divs placed next to eachother. I named it 'leftColumn' and 'rightColumn'. These 2 divs are inside a container div called 'wrapper'.

Now, irrespective of what the contents of 2 div's are, they both should have the same height. How can I do that ?

I don't want to set a static height. I tried to set the height to 100%. But dosen't help either.

Please take a look at the simple html below. Left column has more data than the rigth column. So obviously the height of leftColumn is bigger than rightColumn. But I want the rightColumn also to be of same height as leftColumn.

Thanks in advance.

Mark

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>

<STYLE TYPE="text/css">

div.wrapper {
margin-bottom:20px;
position:relative;
border:1px solid #GGGGGG;
}

div.leftColumn {
display:inline;
width:400px;
border:1px solid #999CCC;
padding-left:5px;
padding-bottom:5px;
}

div.rightColumn {
display:inline;
margin-left:10px;
width:300px;
border:1px solid #999CCC;
position:absolute;
padding-left:5px;
padding-bottom:5px;
}

</STYLE>

</HEAD>
<BODY>
<form>
<div class="wrapper">
<div class="leftColumn">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="rightColumn">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</div>
</form>
</BODY>
</HTML>

MCookie

01-14-2003, 10:10 AM

Try something like this:
<html>
<head>
<title></title>

<style type="text/css">
html, body, form {
height:100%;
}

div.leftColumn, div.rightColumn {
height:99.8%;
border:1px solid #999ccc;
}

div.wrapper {
height:100%;
border:1px solid #gggggg;
}

div.leftColumn {
float:left;
width:400px;
}

div.rightColumn {
float:right;
}
</style>
</head>
<body>
<form>
<div class="wrapper">
<div class="leftColumn">
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
</div>
<div class="rightColumn">
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
</div>
</div>
</form>
</body>
</html>