You are here: Synch two heights « HTML « IT news, forums, messages
Synch two heights

Posted by sfeher on 07/12/06 20:39

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.lang.javascript/browse_thread/thread/f07f6399fb821607/d9a3a8e3e2ef47d0?lnk=st&q=onresize+change+font+size&rnum=2&hl=en#d9a3a8e3e2ef47d0

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

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация