Topic: DIV heights in CSS $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10976" title="Pages that link to Topic: DIV heights in CSS" rel="nofollow" >Topic: DIV heights in CSS\$

Author	Thread
johnvale Obsessive-Compulsive (I) Inmate From: Aylesbury, Bucks, UK Insane since: May 2003	posted 05-24-2003 16:59 I am using CSS. I have two left-floated divs. The first has its own background color and contains images and links but the contents occupy relatively little height. The second div contains more extensive and very variable copy . How do I make the height of the first div always equal the variable height of the second div so that the colored panel is visible for the entire page height ? Any advice would be most welcome. Thanks.
viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-24-2003 19:03 Both are left-floated div's? Isn't one to one side and the other to the other side?
johnvale Obsessive-Compulsive (I) Inmate From: Aylesbury, Bucks, UK Insane since: May 2003	posted 05-25-2003 00:01 Both float to the left, effectively as two columns side by side. The problem is that I want the first column to be the same height as the column to the right of it but I cannot know for an individual page what the height of the second column will be as it varies from page to page. Hope that clarifies the question. Thanks
viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-25-2003 00:44 Interesting. I wanted to know how to do this, two colums with div elements, without one wrapping around the other, and now you have just taught me. But I don't know how to make the first one to be as tall as the second one, if the second one is always taller than the first one. I would use a table but obviously this is not the solution you want. Maybe some javascript guru here can know a way to set the height of the 1st one equals to the height of the 2nd one (or whichever is taller), when the page loads, and using some onrezise event, to correct it when the window is resized... That shouldn't be difficult, I think.
viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-25-2003 01:08 I was playing with the code and I found a way to do it, with some hacks, and not working in Opera (but working fine in IE, and almost fine in Mozilla/Netscape) See if it works for you: code: <html> <head> <title>Test</title> </head> <body style="background-color:blue;"> <div style="float:left; background-color:red"> <div style="float:left; padding-top:0.01em; background-color:yellow"> <p>This is the first left-floated element block.</p> <p>This is the first left-floated element block.</p> <p>This is the first left-floated element block.</p> <p>This is the first left-floated element block.</p> </div> <div style="float:left; padding:0.01em 0em; background-color:green"> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> <p>This is the second left-floated element block.</p> </div> </div> </body> </html> It's a pity it doesn't work at all in Opera. ADDED: if you don't mind having the two columns with fixed width, it will work in Opera also. Just set the width of the two columns and set the sum of both to the parent div. Anyway, why all this trouble if one can use a table? [This message has been edited by viol (edited 05-25-2003).]

Topic: DIV heights in CSS\$

Author

Thread

johnvale
Obsessive-Compulsive (I) Inmate

From: Aylesbury, Bucks, UK
Insane since: May 2003

posted 05-24-2003 16:59

I am using CSS. I have two left-floated divs. The first has its own background color and contains images and links but the contents occupy relatively little height. The second div contains more extensive and very variable copy . How do I make the height of the first div always equal the variable height of the second div so that the colored panel is visible for the entire page height ?

Any advice would be most welcome.

Thanks.

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-24-2003 19:03

Both are left-floated div's? Isn't one to one side and the other to the other side?

johnvale
Obsessive-Compulsive (I) Inmate

From: Aylesbury, Bucks, UK
Insane since: May 2003

posted 05-25-2003 00:01

Both float to the left, effectively as two columns side by side. The problem is that I want the first column to be the same height as the column to the right of it but I cannot know for an individual page what the height of the second column will be as it varies from page to page.

Hope that clarifies the question.

Thanks

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-25-2003 00:44

Interesting. I wanted to know how to do this, two colums with div elements, without one wrapping around the other, and now you have just taught me.
But I don't know how to make the first one to be as tall as the second one, if the second one is always taller than the first one.
I would use a table but obviously this is not the solution you want.
Maybe some javascript guru here can know a way to set the height of the 1st one equals to the height of the 2nd one (or whichever is taller), when the page loads, and using some onrezise event, to correct it when the window is resized... That shouldn't be difficult, I think.

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-25-2003 01:08

I was playing with the code and I found a way to do it, with some hacks, and not working in Opera (but working fine in IE, and almost fine in Mozilla/Netscape)
See if it works for you:

code:

<html>

<head>

<title>Test</title>

</head>



<body style="background-color:blue;">



<div style="float:left; background-color:red">



<div style="float:left; padding-top:0.01em; background-color:yellow">

<p>This is the first left-floated element block.</p>

<p>This is the first left-floated element block.</p>

<p>This is the first left-floated element block.</p>

<p>This is the first left-floated element block.</p>

</div>



<div style="float:left; padding:0.01em 0em; background-color:green">

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

<p>This is the second left-floated element block.</p>

</div>



</div>



</body>



</html>

It's a pity it doesn't work at all in Opera.

ADDED: if you don't mind having the two columns with fixed width, it will work in Opera also. Just set the width of the two columns and set the sum of both to the parent div.

Anyway, why all this trouble if one can use a table?

[This message has been edited by viol (edited 05-25-2003).]

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: DIV heights in CSS

Insert Slimies »

Insert UBB Code »

Topic: DIV heights in CSS $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10976" title="Pages that link to Topic: DIV heights in CSS" rel="nofollow" >Topic: DIV heights in CSS\$