Subject: [css-d] Making an area stretch to maximum area with CSS

From: holnkids at netscape.net (Holly Bergevin)
Date: Mon, 28 Apr 2003 22:47:36 -0400

Webapprentice <[email-masked]> wrote:

>http://www.cocoebiz.com/newsite/index.html
>
>The middle white area, where there is a link to "See the style sheet," 
>is not stretched all the way.  I'd like to stretch the white area so it 
>almost reaches the right white area but not colliding with it.
>
>I've tried "width: auto" and "width: 100%," but this doesn't work.

Hi Stephen - You have a couple of options here, and which you chose may depend on what else you put on the page.

To use absolute positioning as currently written on the div#contentarea and get the browsers to expand a greater distance than the short amount of text you have in there now, specifiy a width for #contentarea. You might choose your min-width value for this. Depending on the browser size and/or screen resolution of your user, the gap will be wider or narrower (or non-existant) with this method. I suspect that this probably isn't what you want to have to deal with.

Another option is to use relative positioning instead, and use right margining to set the distance away from the right border, much like you already have. This will allow the div#contentarea to expand the full width of the area available, as long as it is greater than the min-width you have set. You will also have to adjust the top position, and you shouldn't need the width property at all. 

#contentarea {
    other: styles;
    position: relative;/* change */
    top: 46px;        /* change also */
    /*width: auto;*/ /* probably not necessary */

The min-width property will keep the #contentarea from collapsing beyond the value you have set as the browser narrows, but the #rightnavarea will slide on top of the #contentarea as the browser is narrowed beyond the min-width (except in IE-win which doesn't recognize min-width). If you want that middle column fluid in all browsers, remove the min-width property.

HTH,

~holly

__________________________________________________________________
Try AOL and get 1045 hours FREE for 45 days!
http://free.aol.com/tryaolfree/index.adp?375380

Get AOL Instant Messenger 5.1 for FREE! Download Now!
http://aim.aol.com/aimnew/Aim/register.adp?promo=380455

---

From: webapprentice at onemain.com (Webapprentice)
Date: Tue, 29 Apr 2003 00:02:46 -0400

Hi Holly,
Thank you for the quick reply.

You are correct that absolute positioning + min-width was not the way I 
wanted go.  I  wanted the middle column to be fluid, much like the old 
HTML table hack of setting a td width to 100%.

Your second option of relative positioning intrigued me.  I have never 
quite gotten that to behave properly, so I've always used absolute 
positioning.  I had a lot of problems trying to combine 
relatively-positioned elements with absolutely-positioned elements.  I 
probably don't understand page flow enough.

I've employed your relatively-positioned idea, and it works.  I must 
have been very close to solving my problem, since I only had to change 
two properties for #contentarea, position and top.

I'm kind of amazed that relatively-positioned elements and 
absolutely-positioned elements can cooperate.

I have to examine relative positioning more closely.

Thank you Holly.

Sincerely,
Stephen