468,283 Members | 1,841 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,283 developers. It's quick & easy.

Synch two heights

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

Jul 12 '06 #1
2 1874
<sf****@gmail.comwrote in message
news:11**********************@b28g2000cwb.googlegr oups.com...
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
I hate to say it, but you could try using a table rather than div's. A table
with one row and two columns will automatically have both cells the same
height. Of course if you want both to be the same height and yet one under
the other then tables won't help.

--
Brian Cryer
www.cryer.co.uk/brian
Jul 13 '06 #2
sf****@gmail.com wrote:
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.
Hard to tell what you want without a url or at least a graphic markup
of what you want.

However, does the following article match your needs?

http://www.alistapart.com/articles/fauxcolumns/

/mde/
just some random thoughts . . . .
Jul 13 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Tyler Carver | last post: by
reply views Thread by moko | last post: by
1 post views Thread by tshad | last post: by
2 posts views Thread by sfeher | last post: by
2 posts views Thread by piggy | last post: by
5 posts views Thread by =?Utf-8?B?bWljaGFlbCBzb3JlbnM=?= | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.