Hi All,
I am having trouble big times figuring out a way of forcing a DIV to be
in synch with another DIV's height in a (mostly vertically) fluid
layout in a web app context. The first one has overflow-x:auto; and a
width set but not a height as I want it to vertically grow with the
text inside.
Basically I would like the same height for the second one. I care less
if it is CSS, tables or Javascript but I would prefer the solution to
work on both IE6 & FF1.5.
Trying to fix the height with Javascript works ok except when font size
changes and the heights go out of sync. I found little information on
how to handle this case.
http://groups.google.com/group/comp....a3a8e3e2ef47d0
A second question, not directly related to what I said so far is about
overflow.
Is there any way of enforcing overflow:auto in IE without having to
specify exactly width/height - e.g. use the parents height
(width:100%)? This would fix all my problems including the one from my
first question.
Here's a stripped down version of my code: (it's for a virtual grid
where the the vertical scrolling is faked and the content of the
control gets replaced real-time)
<html>
<head>
<style>
div
{
margin:0px;padding:0px;
}
.container
{
width:420px;
background:green;
}
.scrollbar
{
float:right; overflow:auto;
height:200px; width:16px;
background:orange;
}
.content
{
width:401px;
overflow-x:auto;
background:#f0f0c0;
}
.nowrap
{
white-space: nowrap;
width:700px;
}
</style>
</head>
<body>
<div class="container">
<div class="scrollbar"><div
style="height:1000px;background:red;"></div></div>
<div class="content">
<div class="nowrap">Row1</div>
<div class="nowrap">Row2</div>
<div class="nowrap" style="text-align:right">Row3</div>
<div class="nowrap">Row4</div>
<div class="nowrap">Row5</div>
<div class="nowrap">Row6</div>
<div class="nowrap">Row7</div>
</div>
<div style="clear:both">
</div>
</body>
</html>
Regards,
Sebastian
