Make one DIV the same height as another?

N

Noozer

I have two DIVs... One displays a menu on the left side of the browser
window. The other displays the general content on the right side of the
window. I'd like to make the left DIV match the height of the right DIV. Is
this possible?

I've done some Googling on the subject and it seems that this is an almost
impossible task. : (
 
N

Neal

I have two DIVs... One displays a menu on the left side of the browser
window. The other displays the general content on the right side of the
window. I'd like to make the left DIV match the height of the right DIV.
Is
this possible?

I've done some Googling on the subject and it seems that this is an
almost
impossible task. : (


Yes. But see http://www.alistapart.com/articles/fauxcolumns/ for one
possible solution.
 
W

Whitecrest


"This page is designed for and will look much better in a modern browser
such as Opera or Mozilla."

And people bitch when someone used Javascript and it doesn't work on 13-
15 percent of the visitors. Why build something that doesn't work on
80% of them?

In the real world, it does not matter if IE is good or bad. The fact is
that it is used by about 80% (give or take) of your visitors so above
all else, if you follow the philosophy that you should try to make your
page work for as many visitors as possible, then you also must agree to
make sure it works on IE.
 
B

brucie

in post: <
"This page is designed for and will look much better in a modern browser
such as Opera or Mozilla."

but it still works
And people bitch when someone used Javascript and it doesn't work on
13- 15 percent of the visitors. Why build something that doesn't work
on 80% of them?

the issue is not using it but requiring it (and doing dumb things with
it)
In the real world, it does not matter if IE is good or bad. The fact is
that it is used by about 80% (give or take) of your visitors so above
all else, if you follow the philosophy that you should try to make your
page work for as many visitors as possible, then you also must agree to
make sure it works on IE.

i agree but my above page works fine in IE (and as troll bait) if i
really wanted to i could do a completely different style for IE rather
than just hiding bits it doesn't understand.
 
W

Whitecrest

but it still works

Does it? According to the content, there was supposed to be 3 columns,
I saw 3 rows.
the issue is not using it but requiring it (and doing dumb things with
it)

I agree, most (no need to go there) sites should not depend on the user
having or using anything.
i agree but my above page works fine in IE (and as troll bait)

Were they supposed to be columns?
if i
really wanted to i could do a completely different style for IE rather
than just hiding bits it doesn't understand.

How would you know when to use the IE specific stuff or something else?
Browser detection is weak at best. (devils advocate here) Or do you mean
if you were catering to IE?
 
B

brucie

in post: <
Does it? According to the content, there was supposed to be 3 columns,
I saw 3 rows.

you're being pedantic and you know it. there is nothing preventing you
from "using" the content just because its not in 3 cols.
Were they supposed to be columns?

columns are nice, its the way its intended to look but they're not
required. maybe if i was a newbie, control freak or an artist i would
get upset that some people wouldn't see it how i intended.
How would you know when to use the IE specific stuff or something else?
Browser detection is weak at best. (devils advocate here)

browser detection as you know is useless but as i demonstrated above its
not required.
Or do you mean if you were catering to IE?

i avoid catering to any browser
 
W

Whitecrest

you're being pedantic and you know it. there is nothing preventing you
from "using" the content just because its not in 3 cols.

I agree.
columns are nice, its the way its intended to look but they're not
required. maybe if i was a newbie, control freak or an artist i would
get upset that some people wouldn't see it how i intended.

But you have to admit, the general attitude around here is if the site
is not exactly like one expected (no colored scroll bars, no pop ups,
bla bla bla fill in your own web design issue here) they will
immediately leave. If I had a nickle for ever time I read something
like that in this forum I would have... um... let see... carry the 3..
uh.. $23.65
 
N

Noozer

Whitecrest said:
Does it? According to the content, there was supposed to be 3 columns,
I saw 3 rows.

Turn your monitor sideways! Don't you know anything about interface
design??? : )

<snip>

I think the point of the site was to show how IE is broken, making columns
difficult.
 
B

brucie

in post: <
Whitecrest said:
But you have to admit,

you cant make me! mommy hes trying to make me!
the general attitude around here is if the site is not exactly like
one expected (no colored scroll bars, no pop ups, bla bla bla fill
in your own web design issue here) they will immediately leave.

i don't think anyone believes that but there are a lot of things that
will encourage people to leave and the OP should be aware of them and
reduce their impact. if they want to. i think people forget that
opinions are not holy gospel.
If I had a nickle for ever time I read something like that in this
forum I would have... um... let see... carry the 3.. uh.. $23.65

i only get $19.30, i must be missing some posts.
 
B

brucie

in post: <
Noozer said:
I think the point of the site was to show how IE is broken, making columns
difficult.

no, i was just trolling. i knew some people would have a hissy fit.
 
R

Richard

Noozer said:
I have two DIVs... One displays a menu on the left side of the browser
window. The other displays the general content on the right side of the
window. I'd like to make the left DIV match the height of the right DIV.
Is this possible?
I've done some Googling on the subject and it seems that this is an
almost impossible task. : (


..box { width:200px; float:left; }

<div class="box""> menu</div>
<div class="box">body</div>

Duplicate the divisions and you have it the simple way.
If you want different division attributes, just use the same width/height
properties.

width:50%; height:1000px;
 
B

Barry Pearson

Noozer said:
[snip]
Thanks... Unfortunately the reason I need the DIVs to be the same
size is that I'm trying to get a specific graphic at the bottom of
the DIV.
[snip]

I don't think you are asking for them to be the same height. It sounds as
though you are asking for a way of positioning material below the longest one,
which is different.

Footers are tricky after absolute positioning, but easier after floating.
Richard suggested floating - sounds good.

Try something like:

<div id="wrapper">
<div id="menu">
....
</div>
<div id="content">
....
</div>
<div id="end"></div>
</div>
<div id="footer">
....
</div>

Then float the "menu" left, and give "content" a suitable left margin. And
clear the "end" left in case the menu is higher than the content. (If you hit
"peekaboo", give "wrapper" a line-height of about 1.2, or use one of the other
peekaboo hacks).

If you had a different reason for making them the same height, such as wanting
the "menu" to have a background colour down to the footer, then give "wrapper"
that background colour, and give "content" its own background colour. But this
will only give the right result if content is higher than the menu. It can be
tricky to satisfy all these requirements simultaneously.
 
G

Grahammer

My results are at http://dev.csd.ca/sale ... Take a look. Not to bad
considering I've never really worked with CSS.

Thx!
Thanks... Unfortunately the reason I need the DIVs to be the same
size is that I'm trying to get a specific graphic at the bottom of
the DIV.
[snip]

I don't think you are asking for them to be the same height. It sounds as
though you are asking for a way of positioning material below the longest one,
which is different.

Footers are tricky after absolute positioning, but easier after floating.
Richard suggested floating - sounds good.

Try something like:

<div id="wrapper">
<div id="menu">
...
</div>
<div id="content">
...
</div>
<div id="end"></div>
</div>
<div id="footer">
...
</div>

Then float the "menu" left, and give "content" a suitable left margin. And
clear the "end" left in case the menu is higher than the content. (If you hit
"peekaboo", give "wrapper" a line-height of about 1.2, or use one of the other
peekaboo hacks).

If you had a different reason for making them the same height, such as wanting
the "menu" to have a background colour down to the footer, then give "wrapper"
that background colour, and give "content" its own background colour. But this
will only give the right result if content is higher than the menu. It can be
tricky to satisfy all these requirements simultaneously.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
 
B

Barry Pearson

Grahammer said:
My results are at http://dev.csd.ca/sale ... Take a look. Not to bad
considering I've never really worked with CSS.

Looking good, and behaving well too. (Eg. it works at narrow viewports, and
increasing the font size considerably doesn't cause major problems, although
eventually the text overflows the top bar). Many people's layouts break apart
quite quickly in those cases. I think they want to control the height too
much, whereas you mostly let the height adjust itself. This is typically sound
practice. Perhaps you could rethink the height of the top & bottom bars too?

A couple of comments:

- You are probably "over-<div>ing" a bit. Remember that you can use CSS to
position lots of things, and <div> is just one of them. The advantage of <div>
tends to be that you can wrap things up in a <div>, as you do. But if you have
a stand-alone thing, such as list or image, you can typically handle that with
CSS without wrapping it in a <div> first.

- You appear to be over-doing "position: relative". I didn't examine the
details, but I suspect most of the cases you have are not needed, and not
doing anything.

I love that rotating logo!

I don't know if the issue revealed by the validator will cause you problems:
http://validator.w3.org/check?verbose=1&uri=http://dev.csd.ca/sale/
Thanks... Unfortunately the reason I need the DIVs to be the same
size is that I'm trying to get a specific graphic at the bottom of
the DIV.
[snip]
Barry Pearson wrote ...
[snip]
 
W

Whitecrest

Turn your monitor sideways! Don't you know anything about interface
design??? : )

I believe that is how MS planned it.
I think the point of the site was to show how IE is broken, making columns
difficult.

True, but another point is that it will look bad on 80% of your
visitors. I am not saying IE is great, or better than anything else.
But it is the most popular, and you have to take that into consideration
when designing a site.

If the site will break, I would rather it break on 20% than on 80% (and
yes, best if it breaks on 0%, and that is how most sites should be
built.)
 
W

Whitecrest

you cant make me! mommy hes trying to make me!

See that's how you are, running to mommy....
i only get $19.30, i must be missing some posts.

Remember you were gone for those few months. Thats where the other
nickels came from.
 
B

brucie

in post: <
Whitecrest said:
See that's how you are, running to mommy....

my mommy is better than your mommy!
Remember you were gone for those few months.

the nice men took me for a visit back to my home planet. they're coming
again tomorrow so everyone can breath a sign of relief.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top