Google Answers Logo
View Question
 
Q: Making DIV regions expandable (based on browser-width) ( No Answer,   6 Comments )
Question  
Subject: Making DIV regions expandable (based on browser-width)
Category: Computers > Programming
Asked by: jhabley-ga
List Price: $5.00
Posted: 17 Jan 2004 14:34 PST
Expires: 28 Jan 2004 09:30 PST
Question ID: 297482
I am experimenting with DIV elements and plan to eventually convert my
existing page, designed with tables, to DIV.

Right now, my tables have essentially three cells in a single row. The
left and right cells are "hard-coded" to 150 pixels. The middle cell
is undefined -- thus, it expands based on the browser width.

I would like to replicate this expandability to a DIV structure. I'm
using absolute positioning to put the left "cell" (DIV region) at
LEFT:0, the right region at LEFT:550, and both are 150 pixels wide.

My question: How do I indicate in my CSS code that the middle cell
should expand to fill the width remaining?  (If these were frames, I'd
use a  *  symbol to indicate expansion -- as in '150,*,150')

Help!
Answer  
There is no answer at this time.

Comments  
Subject: Re: Making DIV regions expandable (based on browser-width)
From: scubapup-ga on 18 Jan 2004 08:14 PST
 
width=100% ?
Subject: Re: Making DIV regions expandable (based on browser-width)
From: jhabley-ga on 18 Jan 2004 11:39 PST
 
But it's not truly 100%... it's the balance of whatever's leftover.
Subject: Re: Making DIV regions expandable (based on browser-width)
From: haversian-ga on 18 Jan 2004 22:29 PST
 
Float one div left.  Float one div right.  The main content (not in a
div - just in the body) will render as a middle frame.  Now, the
middle frame will be the full width ("under" the floating divs), so
you need to fix that.  If you look at the CSS formatting model, you'll
see that it's padding, not margin, that you want to change.

DIV.left {float:left}
DIV.right {float:right}
BODY {padding-left: 160px; padding-right: 160px}

-Haversian-ga
Subject: Re: Making DIV regions expandable (based on browser-width)
From: haversian-ga on 20 Jan 2004 11:29 PST
 
Might as well set the width in CSS too:

DIV.left {float:left; width: 150px}
DIV.right {float:right; width: 150px}
Subject: Re: Making DIV regions expandable (based on browser-width)
From: blinkie-ga on 22 Jan 2004 19:18 PST
 
How about using some javascript to do your task, setting your div
width based on your window size minus your left and right column
width.  If you want to get creative you could pass the column widths
in as params, instead of hard coding them like I did.

function doThis() {
  // IE
  if(!document.layers){
    // set div with id "divName" to have width of window - 160*2 
    document.all.divName.style.width = document.body.clientWidth - (160*2);

    // you may need to use .offsetWidth instead of .width and/or .clientWidth
  }
  // netscape
  if(document.layers){
    document.divName.width = window.innerWidth - (160*2)
  }
}
Subject: Re: Making DIV regions expandable (based on browser-width)
From: davidfilmer-ga on 28 Jan 2004 00:36 PST
 
SitePoint has a three-column CSS layout tutorial:
   http://www.sitepoint.com/article/1213

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy