setting cell width

hemaltrivedi

09-24-2004, 03:00 PM

i have created a very simple example here. what i want is a banner on top of page (50px high and covering 100% of width). just below that banner there are 2 areas - on the left hand side, there is an area (which should only be 150px) which reads nothing but just "Main Menu" and the rest of the part to be blank with white background.

Here's the source code -

<html>
<head>
<title>New Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#c1c1c1" style="border:1px solid #afafaf">
<tr style="height:50px" valign="middle">
<td colspan="2" width="100%" bgcolor="#dbdbdb">Banner goes here...
</td>
</tr>
<tr valign="middle" style="height:25px">
<td width="150">Main Menu
</td>
<td width="*" bgcolor="#ffffff">
</td>
</tr>
</table>
</body>
</html>

but what happens, atleast on my pc, is that the left hand part (with Main Menu as title) covers up the entire width and the second cell has only tiny space. This happens inspite of my specifying the width of the first cell as 150 and that of the second cell to be relative.

can anyone tell me what is the reason for such a thing? i would like to know how HTML calculates this.

What confuses me more is that, if in the above example, I set the width of the first cell using percentages, say width="5%" then it works perfect. But if i specify in absolute terms - width="150" or style="width:150px" then it doesnt work and takes up the entire width.

i need what is the fundamental behind this.

thanks in advance

Hemal

evilregis

09-24-2004, 05:10 PM

First off, I don't believe * is a valid value for a width. I would try 100%.

And If you are just filling that 150-wide cell with text, I think you may need to toss in a blank pixel and set it 150 wide or the adjacent cell will collapse it.

I could be wrong on that, and I don't have the time right now to whip it up and test. It's been a while since I've worked with tables for design (thank God!) and I forget about the workarounds needed to do certain things.

amblinalong

09-24-2004, 06:44 PM

First of all, I will point out that I am not any kind of know-it-all. Simply self-teaching in the most modest and sluggish manner. Although tables are lately being "spurned" for span and other tags, I like tables. I find them orderly. ;) So, here is your answer:
Your mistake is in using the "width=100%" instruction in the td banner cell above the main menu td cell. You already instructed the table to fill 100% of the browser window, thus, it is unneccessary to tell any td cells to do the same: any cells without a width instruction will automatically fill in the rest of the browser window. So, remove the width from the following cell shown in bold (I hope):

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#c1c1c1" style="border:1px solid #afafaf">
<tr style="height:50px" valign="middle">
<td colspan="2" width="100%" bgcolor="#dbdbdb">Banner goes here...
</td>

And your problem is solved. Just remove it. Nothing else is needed. Trust me.

Oh, and you can get rid of that wild card asterisk for the width on the white td cell following the Main Menu cell, it automatically fills in the rest of the browser window, now. (Of course, it may be needed as a browser specific instruction, but this advice works in IE and Netscape -- others are unknown to me).

Oh!! One more thing, I forgot to explain WHY it is the Banner cell above the Main Menu cell which causes the problem with the Main Menu cell. Tables, being the orderly things that they are, will automatically cause the cells in each row to be the same width as the cells in the previous rows. Even though you instructed the cell to be width of 150, the cell above it was 100% and the cell to the right of it (white) had no content, causing it to collapse and the Main Menu cell to grow to 100%. You could put a spacer.gif in the white cell, but why bother adding weight and image loading to your webpage when it's just a matter of removing an instruction to the previous row's first cell. Have a great day.

hemaltrivedi

09-25-2004, 04:57 PM

ok. thanks a lot for the explaination.