DIVs of Equal Height

M

Matt White

I am creating a content pane (div) that contains a left pane (div) and
a right pane (div). The left pane contains the bulk of the page's
information while the right pane holds navigational and other links.
The overall content pane expands (as it should) as the left pane gets
longer. However, the right pane, which contains less information, is
then significantly shorter than the left pane. I would like the right
pane to expand with the left pane whether there is content to fill in
the empty space or not. How can I achieve this effect? To help
illustrate, here's a basic outline of what I have:

<div id="content">
<div id="left_pane">
Page information here
As this pane gets longer and fills the page, the navigation pane
to the right should also get longer.
</div>
<div id="right_pane">
Navigation links here
</div>
</div>
 
N

Nik Coughlin

Matt White said:
I am creating a content pane (div) that contains a left pane (div) and
a right pane (div). The left pane contains the bulk of the page's
information while the right pane holds navigational and other links.
The overall content pane expands (as it should) as the left pane gets
longer. However, the right pane, which contains less information, is
then significantly shorter than the left pane. I would like the right
pane to expand with the left pane whether there is content to fill in
the empty space or not. How can I achieve this effect? To help
illustrate, here's a basic outline of what I have:

<div id="content">
<div id="left_pane">
Page information here
As this pane gets longer and fills the page, the navigation pane
to the right should also get longer.
</div>
<div id="right_pane">
Navigation links here
</div>
</div>

http://nrkn.com/3ColEqual/
http://nrkn.com/3ColEqualPositioned/

I believe I have a slightly better technique for doing this now but not up
on my test site so I can't post right now, will look into it later
 
D

dorayme

Matt White said:
I am creating a content pane (div) that contains a left pane (div) and
a right pane (div). The left pane contains the bulk of the page's
information while the right pane holds navigational and other links.
The overall content pane expands (as it should) as the left pane gets
longer. However, the right pane, which contains less information, is
then significantly shorter than the left pane. I would like the right
pane to expand with the left pane whether there is content to fill in
the empty space or not. How can I achieve this effect? To help
illustrate, here's a basic outline of what I have:

<div id="content">
<div id="left_pane">
Page information here
As this pane gets longer and fills the page, the navigation pane
to the right should also get longer.
</div>
<div id="right_pane">
Navigation links here
</div>
</div>

There are many ways to skin this cat. These URLs might give you some
ideas:

<http://dorayme.890m.com/alt/twoCol.html>

<http://netweaver.com.au/alt/stickyFooterWithMarkUp.html>

and a few other mechanisms at

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

richard

I am creating a content pane (div) that contains a left pane (div) and
a right pane (div). The left pane contains the bulk of the page's
information while the right pane holds navigational and other links.
The overall content pane expands (as it should) as the left pane gets
longer. However, the right pane, which contains less information, is
then significantly shorter than the left pane. I would like the right
pane to expand with the left pane whether there is content to fill in
the empty space or not. How can I achieve this effect? To help
illustrate, here's a basic outline of what I have:

<div id="content">
<div id="left_pane">
Page information here
As this pane gets longer and fills the page, the navigation pane
to the right should also get longer.
</div>
<div id="right_pane">
Navigation links here
</div>
</div>


Put both div's into a container then give both a height of 100%.
This will also help keep the floated div's from breaking.
 
N

Nico Schuyt

Matt said:
I am creating a content pane (div) that contains a left pane (div) and
a right pane (div). The left pane contains the bulk of the page's
information while the right pane holds navigational and other links.
The overall content pane expands (as it should) as the left pane gets
longer. However, the right pane, which contains less information, is
then significantly shorter than the left pane. I would like the right
pane to expand with the left pane whether there is content to fill in
the empty space or not. How can I achieve this effect?

Use a table (one row, two cells) instead of div's
 
M

Matt White

Use a table (one row,  two cells) instead of div's

I'd have to say the table is the easiest solution. Tables can be
annoying sometimes but trying to do this with divs is not as simple as
I thought. Thanks.
 
D

dorayme

Matt White said:
I'd have to say the table is the easiest solution. Tables can be
annoying sometimes but trying to do this with divs is not as simple as
I thought. Thanks.

If you know your content is taller than your navigation, it is easy and
stable to do similar to what is shown at

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

Why would this be any problem for you? Perhaps it is not as simple
initially in concept as a table, I agree. But you can get to a stage
where this looks pretty simple, just like a juggler who is mastering 11
balls looks back to how 3 balls were a big step from 2.

(Naturally, you have to give different widths and margins for your
purposes)
 
M

Matt White

If you know your content is taller than your navigation, it is easy and
stable to do similar to what is shown at

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

Why would this be any problem for you? Perhaps it is not as simple
initially in concept as a table, I agree. But you can get to a stage
where this looks pretty simple, just like a juggler who is mastering 11
balls looks back to how 3 balls were a big step from 2.

(Naturally, you have to give different widths and margins for your
purposes)

Because I can't guarantee the content is longer than the side bar. In
fact, I have several pages where it isn't and those solutions just
weren't ideal for all situations that I came across. The table does
have some small issues but they were easy to work around and it
resizes beautifully no matter which column has more content.
 
D

dorayme

Because I can't guarantee the content is longer than the side bar. In
fact, I have several pages where it isn't and those solutions just
weren't ideal for all situations that I came across. The table does
have some small issues but they were easy to work around and it
resizes beautifully no matter which column has more content.

OK that is fair enough reason. But, in that case, you might be
interested in a very simple method of making two cols that does not
involve knowing which has the most content. let me make a page 11:

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

I have been meaning to make it for a while but now it's weekend and no
risk of clients demanding deadlines, you force my hand... <g>

Not that I really want to force you away from table use for simple
columning purposes, it is no big crime. But you can get into the frame
of mind where you feel a bit naughty doing it, its an old Catholic thing
that life should not be so easy and if it is, you are sinning!

Just one thing, as I have just done page 11, I may have to re proof-read
it later...
 

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