|
|
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! |
|
There is no answer at this time. |
|
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 |
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 Home - Answers FAQ - Terms of Service - Privacy Policy |