Click here to get back home

making div stretch vertically to same size as neighbor div
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
making div stretch vertically to same size as neighbor div runner7 11-08-2007
Posted by runner7 on November 8, 2007, 1:12 am
Please log in for more thread options
 Can someone tell me how to make a div stretch vertically so it is
always the same height as its neighbor div, while the neighbor div
expands to fit its content (like a navigation bar on the left always
the same height as the content div)?


Posted by Ben C on November 8, 2007, 3:08 am
Please log in for more thread options
> Can someone tell me how to make a div stretch vertically so it is
> always the same height as its neighbor div, while the neighbor div
> expands to fit its content (like a navigation bar on the left always
> the same height as the content div)?

At least four options:

1. Make the neighbour div the containing block for the other div and use
absolute positioning.

Something like:

#neighbour { position: relative; }
#stretch { position: absolute; top: 0; bottom: 0; right: 0; }

<div id="neighbour">
<div id="stretch">...</div>
content...
</div>

2. Make them both display: table-cell (certainly won't work in IE)
3. Use a <table>
4. Give #neighbour a thick left border with a colour. Set #stretch to
the same width as that border and give it the same background-color.
Float #stretch left and give it a negative left margin (equal to
minus its width) to make it sit on top of #neighbour's left border.
It will look like it's the same height.

Posted by David E. Ross on November 8, 2007, 1:07 pm
Please log in for more thread options
On 11/7/2007 10:12 PM, runner7@fastmail.fm wrote:
> Can someone tell me how to make a div stretch vertically so it is
> always the same height as its neighbor div, while the neighbor div
> expands to fit its content (like a navigation bar on the left always
> the same height as the content div)?
>

I don't. Instead, I enclose the two side-by-side DIVs within another DIV.

--
David E. Ross
<http://www.rossde.com/>

Natural foods can be harmful: Look at all the
people who die of natural causes.

Posted by runner7 on November 9, 2007, 1:30 am
Please log in for more thread options
I appreciate the answers. I tried #1 from Ben and it definitely works,
but "neighbor" won't get deeper when "stretch" exceeds the depth of
"neighbor", so the content area always needs to be the same height as
or deeper than the navigation area for the heights to line up.

David, could you possibly provide a code example of what you mean?


Posted by David E. Ross on November 9, 2007, 1:43 pm
Please log in for more thread options
On 11/8/2007 10:30 PM, runner7@fastmail.fm wrote:
> I appreciate the answers. I tried #1 from Ben and it definitely works,
> but "neighbor" won't get deeper when "stretch" exceeds the depth of
> "neighbor", so the content area always needs to be the same height as
> or deeper than the navigation area for the heights to line up.
>
> David, could you possibly provide a code example of what you mean?
>

Oops! I forgot. It's not that I use an enclosing DIV. It's that the
first element after the two DIVs has
        style="clear: both"
I use an enclosing DIV when it creates an indented block for the columns.

Go to my <http://www.rossde.com/garden/garden_bloom.html>. Expose the
source HTML. (Ignore the long comment after the </BODY>; I use it to
copy and paste into the displayed content.) The columns are created by
        <div class="cols col-left">
and
        <div class="cols col-right">
The note seen at the bottom -- "Also see My Garden Diary" -- begins with
        <p style="clear: both; text-align: center">

The CSS used by the DIVs is
        .cols { width: 48%;         /* use with col-left and col-right */
                border-style: none;
                text-align: justify;
                margin-bottom: 1em }
        .col-left { margin-left: 0; margin-right: auto;
                padding-right: 1%;
                float: left }
        .col-right { margin-left: auto; margin-right: 0;
                padding-left: 1%;
                float: right }


--
David E. Ross
<http://www.rossde.com/>

Natural foods can be harmful: Look at all the
people who die of natural causes.

Similar ThreadsPosted
Stretch DIV Tag From Middle? March 22, 2005, 2:34 pm
Aligning content vertically September 8, 2005, 7:59 pm
Vertically centering tables September 19, 2005, 5:21 pm
centering text vertically in div November 9, 2007, 1:39 am
How can I display a right arrow in IE aligned vertically in the middle? October 16, 2005, 9:39 am
Lost ability to center tables vertically December 27, 2005, 11:15 am
Firefox - Prevent TextField size change when user changes font size? October 3, 2006, 6:21 pm
Making radical expressions? November 19, 2004, 6:18 am
making iframe take up 100% of height October 6, 2005, 7:57 pm
Page Is Making No Sense! March 7, 2005, 1:43 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap