div heights

[jim_briers_us]

Hi

Pretty starightforward question I'm sure so hopefully someone can
enlighten me. If I have two divs next to each other how can I ensure
that both are the same height? E.g. if the right hand column contains
more text than the left I'd like the left hand column to be the same
height. So in the example below I'd like leftcontent1 to get its
height from rightcontent1. Ideas?

<style>
#page1 {
width: 600px;
float: left;
}

#leftcontent1 {
float: left;
width: 200px;
border: 1px solid #ccc;
}
#rightcontent1 {
float: left;
width: 200px;
border: 1px solid #ccc;
}
</style>

<div id="page1">0

<div id="leftcontent1">1</div>

<div id="rightcontent1">2<br><br><br><br><br></div>

</div>

MTIA

Jim

[jim_briers_us]

Ok. After a bit more research I understand that this isn't as
straightforward as I expected. CSS sucks heh? ;)

The idea behind the design is that there is a background image on the
left hand column, so the more content you have on the right column the
more of the background image you see in the left hand column. I
understand that this isn't possible with CSS!

So what am I left with? Using tables it's a five minute job. But you
guys don't like tables anymore! ;)

Or use JS?

<script>
x = document.getElementById('leftnav');
y = document.getElementById('rightnav');
x.style.height = y.offsetHeight;
</script>

This will do what I want but I obviously don't want to use JS.

So what should I do? Any ideas?

Jim

[Johannes Koch]

ji***********@yahoo.co.uk wrote:

Ok. After a bit more research I understand that this isn't as
straightforward as I expected. CSS sucks heh? ;)

No, you can do this with CSS. Read chapter 17 in the CSS 2 (2.1)
specification. But this is not implemented in MS IE. IE sucks heh?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Spartanicus]

ji***********@yahoo.co.uk wrote:

Ok. After a bit more research I understand that this isn't as
straightforward as I expected. CSS sucks heh? ;)
No, IE does (easy peasy in proper browsers).
The idea behind the design is that there is a background image on the
left hand column, so the more content you have on the right column the
more of the background image you see in the left hand column. I
understand that this isn't possible with CSS!
Yawn: http://homepage.ntlworld.com/spartanicus/temp.htm
But you guys don't like tables anymore! ;)

You'll find few people arguing against tables used for tabular data,
you'll also find a more nuanced view on using tables for layout amongst
some of us.

--
Spartanicus

[jim_briers_us]

Many thanks.

[RobG]

ji***********@yahoo.co.uk wrote:

Ok. After a bit more research I understand that this isn't as
straightforward as I expected. CSS sucks heh? ;)

The idea behind the design is that there is a background image on the
left hand column, so the more content you have on the right column the
more of the background image you see in the left hand column. I
understand that this isn't possible with CSS!

So what am I left with? Using tables it's a five minute job. But you
guys don't like tables anymore! ;)

Or use JS?

<script>
x = document.getElementById('leftnav');
y = document.getElementById('rightnav');
x.style.height = y.offsetHeight;
</script>

This will do what I want but I obviously don't want to use JS.
No, it wont.

You are attempting to access the height property of the elements' style
object, but it doesn't have one - the height is determined (in this
case) by the browser's layout engine.

If the height had been set inline or using script, then yes, it'd work.
But it won't work if the height is set any other way (e.g. style rule
or inherited).

You need to use getComputedStyle for Mozilla and Opera and currentStyle
for IE, which adds the overhead of feature detection and having to wait
for the elements to be laid out before modifying them:

<URL:http://www.quirksmode.org/dom/getstyles.html>

So what should I do? Any ideas?

Using script for layout is nearly always the worst solution. Stick to
CSS or tables.

--
Rob