im trying to create a table with three cells that spans the entire width of a page. The center cell is a fixed width (say, 500 pixels) that will hold another table filled with navigation elements, etc. The left and right cells need to stretch to fill the remainder of the page.<br />
<br />
The graphics that will fill the left and right cells are not identical, so I can't simply use a 100% wide table cell filled with the graphic and then center the navigation cell in the middle of it.<br />
<br />
How can I make the outer cells stretch while keeping the middle cell in the center of the page? I know I could change the design and move the navigation flush with the left of the page, and then let the cell on the right stretch, but I dont like the way that looks.<br />
<br />
I was thinking maybe a javascript could find the inner width of the browser window and then subtract the width of the center table cell (which is the only fixed width). That value divided by two could be sent to each of the outer table cells to dynamically change their width.<br />
<br />
Anyone think that would work or have a better/simpler solution? Anyone know javascript?<!--content-->here's a jpg that may illustrate my problem better...forgive the roughness of it<!--content-->in the picture above, the center cell should be 500 pixels wide, not 5600! D-oh!<!--content-->so you set the left and right to be percentages and the middle to be 500. but you have to take into account of what the users resolution is. if they are on 800 then 500 is what about 62% of the over all width, so we make the left and right say 20% a piece.<!--content-->
<br />
The graphics that will fill the left and right cells are not identical, so I can't simply use a 100% wide table cell filled with the graphic and then center the navigation cell in the middle of it.<br />
<br />
How can I make the outer cells stretch while keeping the middle cell in the center of the page? I know I could change the design and move the navigation flush with the left of the page, and then let the cell on the right stretch, but I dont like the way that looks.<br />
<br />
I was thinking maybe a javascript could find the inner width of the browser window and then subtract the width of the center table cell (which is the only fixed width). That value divided by two could be sent to each of the outer table cells to dynamically change their width.<br />
<br />
Anyone think that would work or have a better/simpler solution? Anyone know javascript?<!--content-->here's a jpg that may illustrate my problem better...forgive the roughness of it<!--content-->in the picture above, the center cell should be 500 pixels wide, not 5600! D-oh!<!--content-->so you set the left and right to be percentages and the middle to be 500. but you have to take into account of what the users resolution is. if they are on 800 then 500 is what about 62% of the over all width, so we make the left and right say 20% a piece.<!--content-->