...

View Full Version : Matching Height\width of two elemnts



The Ace
05-09-2006, 05:05 PM
Hello guys, I'm new here :)

I'm trieng to match two DIV elemnts height, that the first div will be at a height depending on the contents of the sertain DIV, and the second DIV will be automaticly matched in height, as you would axpect in a table row and two cells in the same row to behave.

Thanks

BonRouge
05-09-2006, 05:53 PM
This could be done in a variety of ways depending on your page.
One problem that people often have is getting columns of a 2- or 3-column layout to be the same height. One easy way to sort this out is to fake it by using background images. Here's an example:
http://bonrouge.com/3c-hf-fluid-lc.php

If that's not what you mean, maybe this might help...

http://bonrouge.com/br.php?page=equalheightcss

Failing that, you could fall back on javascript...

http://bonrouge.com/br.php?page=fixH

jonnybinthemix
05-09-2006, 06:04 PM
assuming that you want the two divs side by side, you could put the 2 divs inside an outer div and set the two inside divs to 100% height??

havent tried it, but sounds like a plan! ;) lol

BonRouge
05-09-2006, 06:11 PM
assuming that you want the two divs side by side, you could put the 2 divs inside an outer div and set the two inside divs to 100% height??

That would work if the outer div had a fixed height, but that doesn't seem to be the case...

jonnybinthemix
05-09-2006, 06:15 PM
good point! ;)

The Ace
05-10-2006, 12:42 AM
This could be done in a variety of ways depending on your page.
One problem that people often have is getting columns of a 2- or 3-column layout to be the same height. One easy way to sort this out is to fake it by using background images. Here's an example:
http://bonrouge.com/3c-hf-fluid-lc.php

If that's not what you mean, maybe this might help...

http://bonrouge.com/br.php?page=equalheightcss

Failing that, you could fall back on javascript...

http://bonrouge.com/br.php?page=fixH
Thanks, but that's not what I was looking for.
The background hack is kinda cheap, isn't? ;)
I'm looking for a solution that will make two DIVs inside a parent DIV to behave like two cells inside a perant row of a table, and preferbly not with JS and background that makes it look good, but it not IT, and I hope you know what I mean :)

P.S.
Loved your site and the layouts, will defenetly use it :)
and what is this code:

#wrap {
position:relative;{
width:780px;{
min-height:100%;{
margin:auto;{
background:#fff url(bg.gif) repeat-y;{
border:1px solid gray;{
border-width:0 1px;{
}{
?
why there are so many opening curly brackets? (on this page: http://bonrouge.com/2c-hf-content1st.php )

The Ace
05-10-2006, 12:44 AM
That would work if the outer div had a fixed height, but that doesn't seem to be the case... Yeap, tried that one, no go for me :)

hope that There is a solution out there for CSS2 without JS... :(

BonRouge
05-10-2006, 01:47 AM
Thanks, but that's not what I was looking for.
The background hack is kinda cheap, isn't? ;)
I'm looking for a solution that will make two DIVs inside a parent DIV to behave like two cells inside a perant row of a table, and preferbly not with JS and background that makes it look good, but it not IT, and I hope you know what I mean :)

P.S.
Loved your site and the layouts, will defenetly use it :)
and what is this code:

#wrap {
position:relative;{
width:780px;{
min-height:100%;{
margin:auto;{
background:#fff url(bg.gif) repeat-y;{
border:1px solid gray;{
border-width:0 1px;{
}{
?
why there are so many opening curly brackets? (on this page: http://bonrouge.com/2c-hf-content1st.php )

Ah! That's a mistake. Thanks for pointing it out. I didn't notice... :o



The background hack is kinda cheap, isn't? ;)

It's actually very common. Do a search on 'faux columns' and you'll see.

harbingerOTV
05-10-2006, 01:57 AM
I don't know if this is exactly what your trying to achieve but it sounds similar. The issue on this trial was to make the top 2 divs stay the same height no matter which one had more content. It took a while but tested in the end alright in IE6 FF and Opera. It's a little code heavy and I haven't seen it in a while but a little looking at the code and you should probally be able to make heads or tails of it. i think i kept a pretty good log of the progression in the threadthough.

http://www.codingforums.com/showthread.php?t=75827

The Ace
05-10-2006, 01:57 AM
I donno, I still don't like this thing, currently using tables (now this is cheap :P),
But still hoping for a css trick...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum