Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 cell in row width problem

Status
Not open for further replies.
mgriffith

mgriffith

MIS
Jul 3, 2001
177
US
i've got a problem with a table... i have a main table set up with a header row (colspan 2), navigation and content cells in a row, and then a footer row (colspan 2).

i need to set the navigation to a specific width (165px) and have the content take up the rest. the only "solution" i've found is to force the content cell width to 100%, but this creates another problem. my page wants to scroll left and right, when clearly the text in the content cell should be wrapping. the extra bit seems to be the width of a scrollbar. any ideas?

also i need to set the content to fill the screen heightwise, without pushing the footer off the page. i have the entire table set to a height of 100%, and then the content cell set to height of 100% (without this, if there is only a little content the footer pushes up and looks ugly), but this pushes the footer off the bottom of the screen. any ideas?

i have right now
<table width=100% height=100%>
<tr>
<td colspan=2>head</td>
</tr>
<tr>
<td width=165>navigation</td>
<td width=100% height=100%>content</td>
</tr>
<tr>
<td colspan=2>footer</td>
</tr>
</table>

any suggestions? you can view the site at
thanks for any help mike griffith
----------------------------
mgriffith@lauren.com
mdg12@po.cwru.edu
 
Sort by date Sort by votes
Well your code works just how you want it to on my browser (IE6) so I haven't been able to test the following solution:

Code: 
<html>
<body>
<table border=1 width=&quot;100%&quot; height=&quot;100%&quot;>
  <tr height=1>
    <td colspan=2>head</td>
  </tr>
  <tr>
    <td width=165>navigation</td>
    <td>content</td>
  </tr>
  <tr height=1>
    <td colspan=2>footer</td>
  </tr>
</table>
</body>
</html>

Basically I set widths and heights for the fixed parts of the screen and let the content cell suck up what's left. Although I specify a height of 1 pixel for the header & footer rows, the browser expands them to accomodate the text they contain (I suppose other browsers might handle this differently, so you would be better picking sensible values based on the content). -- Chris Hunt
Extra Connections Ltd
 
Upvote 0 Downvote
There's no perfect solution and you should try not to mix fixed and percentage widths, for example
<td width=&quot;165&quot;></td><td width=&quot;85%&quot;></td>
would be a bad idea.

What I usually do is something like:

<table summary=&quot;&quot; width=&quot;100%&quot;>
<!-- nav cell -->
<td width=&quot;15%&quot;>

<!-- nested nav table -->
<table summary=&quot;&quot; width=&quot;165&quot;>
cells n' stuff
</table>

</td>

<!-- content cell -->
<td width=&quot;85%&quot;>
CONTENT
</td>
</table>

É ::
 
Upvote 0 Downvote
hmm.... i'm really looking for something that's probably not possible. i have thought of dynamically setting the width using javascript, but i think that would be more overhead than i'd like and it might make it render slow.

if i put the nav table at 15%, it looks bad, unless that 15% works out to be 165px, because it's got a grey background, and the content has a white background.

wasn't there something you could do like set a width=&quot;*&quot; and it filled up the rest.... or was that for frames?? i've tried it and it doesn't work.

i'm going to keep looking, thanks for any help. mike griffith

----------------------------
systems and control engineering
case western reserve university
mdg12@cwru.edu
 
Upvote 0 Downvote
mike,

try
Code: 
<td width=&quot;100%&quot;>navigation</td>

for the cell that you want the &quot;*&quot; behavior in

-pete
 
Upvote 0 Downvote
I've had no problems mixing percentage & fixed widths in the same table, it's more problematic (but not fatal) in the same row. You don't need to explicitly define a width=&quot;*&quot; attribute, the browser will infer that from the table width and the other column widths. A table like this is valid html and should work fine:

Code: 
<table width=&quot;100%&quot;><tr>
<td width=100>First 100 pixels</td>
<td>The rest of the screen</td>
</tr></table>

-- Chris Hunt
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rk0000
  • Locked
  • Question
Wordpress: Unable to view icons next to “Hide Controls” in admin customize.php
Replies
0
Views
165
rk0000
rk0000
jhed
  • Locked
  • Question
blank control panel in joomla 2.5
Replies
7
Views
147
spamjim
spamjim
c0deM0nK424
  • Locked
  • Question
Joomla Installation problem - Could not connect to the database ?
Replies
3
Views
116
ChrisHirst
ChrisHirst
ebstarasia
  • Locked
  • Question
Editing Menu Module Width in Joomla
Replies
0
Views
53
ebstarasia
ebstarasia
vegomatic
  • Locked
  • Question
Looking for search appliance for our intranet
Replies
2
Views
96
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top