DIV - dynamic height

[nicnat]

I can do this easily with tables but I'm having difficulty trying to
accomplish the same thing using just DIVs. As an example I'll give a simple
design of a page with a header extending all the way across the top and two
columns beneath it. The left column contains NAV information and has a
background color. The right column has the page CONTENT and has a neutral
(ie different) background and contains dynamic page information (ie the
amount of information and thus the length of the column will vary). The
information contained in the 2nd column (CONTENT) is inherently more than
the information contained in the left (NAV) column. The desired effect is
for both columns to have the same height and for the NAV border to extend
the exact length of the page CONTENT.

Using DIVs I can't seem to figure out how to make the height of the left
column adjust to be the same height as the dynamic right hand column. Using
tables its easy. All the columns will automatically scale to the same
height. With DIVs, the column heights are independent of each other. The
consequnce is that the content column is longer than the nav column.
Because the nav column has a background color this difference in height is
all too readily apparent.

How can the desired effect (dynamic height for both columns) be achieved
with DIVs? It's trival with tables and I thought it would be with DIVs.
Stubborn as I am, I'm trying to figure this out. Any help?

 

[dorayme]

I can do this easily with tables but I'm having difficulty trying to
accomplish the same thing using just DIVs. As an example I'll give a simple
design of a page with a header extending all the way across the top and two
columns beneath it. The left column contains NAV information and has a
background color. The right column has the page CONTENT and has a neutral
(ie different) background and contains dynamic page information (ie the
amount of information and thus the length of the column will vary). The
information contained in the 2nd column (CONTENT) is inherently

You say inherently?

more than
the information contained in the left (NAV) column. The desired effect is
for both columns to have the same height and for the NAV border to extend
the exact length of the page CONTENT.

Inherently eh? OK, if it is inherent then I have just the ticket for you
at

<http://netweaver.com.au/floatHouse/page10.html>

 

[nicnat]

You say inherently?


Inherently eh? OK, if it is inherent then I have just the ticket for you
at

<http://netweaver.com.au/floatHouse/page10.html>

For purposes of my example, inherently simply means "all the time".
Thanks for the refernece. I hadn't tried this technique. I copied the
script from the example for Figure 3 and tried it out. Seems to work fine
for the IE browser but Firefox doesn't display it correctly. Any idea why?
Should it work consistently, this would be an acceptable solution.

 

[dorayme]

For purposes of my example, inherently simply means "all the time".

It's ok, I knew what you meant. I was delighted to see it.

Thanks for the refernece. I hadn't tried this technique. I copied the
script from the example for Figure 3 and tried it out. Seems to work fine
for the IE browser but Firefox doesn't display it correctly. Any idea why?
Should it work consistently, this would be an acceptable solution.

If you have copied the script from the caption figures, that is risky
because those are a bit sketchy (you might have to look into the source
code for the page which has to be the full mcCoy. It is hard to know
quite what you have done without seeing your effort, why not post a url
so we can see and sort it out. Should not be hard.

That it works in IE 6 (you don't mention which version) is not great
news in one sense, because under many conditions, IE 6 will grow height
for a parent container as a matter of course without need for the
overflow: hidden or auto on it.

(Just btw, on this business of IE 6, in conditions where the parent does
not grow height for its floated children (they are more common than I
originally thought) it cannot be induced to do so by overflow: hidden.
That is fairly well known I think. But I have noticed that it cannot be
induced to do by a completely empty clearing div either (as with other
modern browsers). The smallest content, a space will do, does the trick!
There are other tricks too about width and height to jog IE into action.
I will happily attend IE 6's funeral if it is ever announced. To make
sure it is dead!)

 

[nicnat]

It's ok, I knew what you meant. I was delighted to see it.


If you have copied the script from the caption figures, that is risky
because those are a bit sketchy (you might have to look into the source
code for the page which has to be the full mcCoy. It is hard to know
quite what you have done without seeing your effort, why not post a url
so we can see and sort it out. Should not be hard.

That it works in IE 6 (you don't mention which version) is not great
news in one sense, because under many conditions, IE 6 will grow height
for a parent container as a matter of course without need for the
overflow: hidden or auto on it.

(Just btw, on this business of IE 6, in conditions where the parent does
not grow height for its floated children (they are more common than I
originally thought) it cannot be induced to do so by overflow: hidden.
That is fairly well known I think. But I have noticed that it cannot be
induced to do by a completely empty clearing div either (as with other
modern browsers). The smallest content, a space will do, does the trick!
There are other tricks too about width and height to jog IE into action.
I will happily attend IE 6's funeral if it is ever announced. To make
sure it is dead!)

I'm running IE7 and Firefox 2.0.0.13. Both are the latest versions.
The following is the web page script in question:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<!-- Fig 3. This one allows the columns to grow wider with text size
changes: -->
<div style="width: 30em; background: #ffc;">
<div style="float:right; width: 15em; border-left: .1em solid #000;
background: #cfc;">
<p>This column has a green background and is the longest of the two.</p>
<p>If the parent were to have a different coloured background to
.....</p></div>
<p>In this example, only to show it can be done, the text is in a paragraph
element. ...</p></div>

</body>
</html>

When uploaded to my web host it produces completely different results in IE7
and in FF. In IE 7 it will produce the desired effect as discussed and
shown in the link you provided
(http://netweaver.com.au/floatHouse/page10.html), Fig 3. In FF this same
HTML document produces the less than desired effect of two columns with
unequal heights.

As the desired effect is very easily accomplished with tables, I should
stick with that. For completeness I provide sample HTML code which produces
the desired effect using any browser I've tried:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<table>
<tr><td style="background-color:#ffc;width:15em;vertical-align:top">
<p>In this example, only to show it can be done, the text is in a paragraph
element. ...</p></td>
<td style="background-color:#cfc;width:15em;vertical-align:top">
<p>This column has a green background and is the longest of the two.</p><br
/>
<p>If the parent were to have a different coloured background to ....</p>
</td></tr>
</table>

</body>
</html>

I only started this thread because I was trying to learn a "tableless" way
to accomplish a rather routine task. The Floating DIV concept was one I
hadn't even considered but it doesn't seem to work consistently.
</Thanks>
nicnat

 

[dorayme]

<!-- Fig 3. This one allows the columns to grow wider with text size
changes: -->
<div style="width: 30em; background: #ffc;"> [code snipped]

When uploaded to my web host it produces completely different results in IE7
and in FF. In IE 7 it will produce the desired effect as discussed and
shown in the link you provided
(http://netweaver.com.au/floatHouse/page10.html), Fig 3. In FF this same
HTML document produces the less than desired effect of two columns with
unequal heights.

....

As I thought, you have copied the caption code without grabbing the
*crucial* thing that is needed to make it work in good browsers like FF.
If you look at the caption code, there is a big clue in class="nuclear"
for the wrapper or parent div. The css for "nuclear" is overflow:
hidden. You have simply dropped the class from the code you submit here
and not compensated for it.

I wrote that set of pages not with "tutorial" in mind but more to think
through and discuss a few issues. The significance of the parent having
a class perhaps needs you to have read the previous page or two.

So, instead of your:

<div style="width: 30em; background: #ffc;">

use

<div style="width: 30em; background: #ffc; overflow: hidden;">

If you read the previous pages, you will see there are other techniques.
You can use clearing divs... But the above should be good for your
stated purposes.

I only started this thread because I was trying to learn a "tableless" way
to accomplish a rather routine task. The Floating DIV concept was one I
hadn't even considered but it doesn't seem to work consistently.

It should work for you if you follow the above. But thank you for this
as it alerts me to the misunderstanding caused, I will now alter the
code displayed in caption Fig. 3 and remove the class and substitute the
crucial bit in the inline style.

 

[nicnat]

As I thought, you have copied the caption code without grabbing the

*crucial* thing that is needed to make it work in good browsers like FF.
If you look at the caption code, there is a big clue in class="nuclear"
for the wrapper or parent div. The css for "nuclear" is overflow:
hidden. You have simply dropped the class from the code you submit here
and not compensated for it.

I wrote that set of pages not with "tutorial" in mind but more to think
through and discuss a few issues. The significance of the parent having
a class perhaps needs you to have read the previous page or two.

So, instead of your:

<div style="width: 30em; background: #ffc;">

use

<div style="width: 30em; background: #ffc; overflow: hidden;">

If you read the previous pages, you will see there are other techniques.
You can use clearing divs... But the above should be good for your
stated purposes.



It should work for you if you follow the above. But thank you for this
as it alerts me to the misunderstanding caused, I will now alter the
code displayed in caption Fig. 3 and remove the class and substitute the
crucial bit in the inline style.

Yes! Adding "overflow:hidden" to the style for the leading DIV makes this
work for FF and IE. Very interesting. Thanks.

 

[morningsunshine]

Links Broken

Hi, I am trying to solve a similar problem but the link to the solution is broken. Can you post your answer here please?