473,748 Members | 4,697 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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;padd ing:0px;
}
.container
{
width:420px;
background:gree n;
}
.scrollbar
{
float:right; overflow:auto;
height:200px; width:16px;
background:oran ge;
}
.content
{
width:401px;
overflow-x:auto;
background:#f0f 0c0;
}
.nowrap
{
white-space: nowrap;
width:700px;
}
</style>
</head>
<body>

<div class="containe r">
<div class="scrollba r"><div
style="height:1 000px;backgroun d:red;"></div></div>
<div class="content" >
<div class="nowrap"> Row1</div>
<div class="nowrap"> Row2</div>
<div class="nowrap" style="text-align:right">Ro w3</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:bo th">
</div>
</body>
</html>

Regards,
Sebastian

Jul 12 '06 #1
2 2406
<sf****@gmail.c omwrote in message
news:11******** **************@ b28g2000cwb.goo glegroups.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.co m 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2903
by: steve | last post by:
Hi, I finally figured out the best way to synch local and remote script folders, containing many php script files. What I used to do before was try to ftp all the changed files, etc. which was tedious and often broke. It was also very slow. What I do now is to pkzip the folder up, ftp the pkzip’ed data to remote, and then unzip it there, which recreates the directories and files.
1
2434
by: Tyler Carver | last post by:
I am trying to create a table that is 100% of the viewport with three rows. The top and bottom rows have a fixed height and the center row I want to take up the rest of the space. This work fine in Mozilla and Opera but I cannot control the row height exactly in IE. Row heights are working more like min heights. Here are two examples. http://hughaxton.com/newsgroups/IETableRowHeight.html This one shows the height of the table at...
0
1613
by: moko | last post by:
This is a bit long-winded. Can somebody read thru these 2 use cases, and tell me if it is feasible ? :- Use Case : Replication before Offline Synch Scenario 1 : Oracle Server , MSDE client 1. User clicks on 'Go Offline'. System creates a MSDE SQL database in laptop (client), gets the schemas of the tables in Oracle, creates corresponding tables in client's MSDE SQL (mapping Oracle datatypes to SQL
7
2329
by: lauren quantrell | last post by:
A while back I got a requirement for the client to be able to adjust the relative heights of two subforms by click-dragging the mouse and I came up with a kludge solution using a border control between the two subforms. But I put my mind to this again recently and came up with a solution (code below) that works well with multiple subforms to size both the heights and widths of the sunforms relative to each other, and it uses no additional...
1
1339
by: tshad | last post by:
Why are the text box heights of the input/file type textbox for uploading files a smaller height than a normal textbox? They have the exact same font and the same size font. But the heights are smaller for the upload textbox for some reason. I wanted to make them look the same, but can't figure out how to change them - or can you?
5
2604
by: Rob | last post by:
I have a form where the user may see a matrix of data in a grid (populated via a dataset). If the user wishes to add a new row of data, they click a button and a new form opens where the user may enter data into each textbox, then click the add button when finished. At this point a stored procedure is run which inserts the new row into the database (not the dataset), given that the row is not a duplicate and the contents of each text...
2
3780
by: sfeher | last post by:
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
2
1887
by: piggy | last post by:
Hello, I have an application and when a user clicks on it, it first will check to see if the there is a new version in the server using files synch (ftp). If there is then download the new files to the client machine. Clickonce won't work for me so i have tried to see if files synch will work. Thanks for your help.
5
6686
by: =?Utf-8?B?bWljaGFlbCBzb3JlbnM=?= | last post by:
I want to be able to increase or decrease row heights of a populated DataGridView from the keyboard. I set up a test program with menu items to increase and decrease, assigned shortkey keys (ctrl-UpArrow and ctrl-DnArrow), and attached handlers that execute this code: public partial class MainForm : Form { . . . dataGridView.RowTemplate.Height += increment; Refresh();
0
8984
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8823
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9363
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9238
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8237
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6793
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6073
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
2
2775
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2206
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.