Header Positioning and Structure

Making a header/title bar work correctly

[mikemalphurs]

Hello-
I am working on a "title bar" or "header" for my client's site. Right now I have it set up as a table within a div. The table has 1 row and 4 columns. The first column needs to be 65 pixels (or 8% wide). The second column contains HTML text and needs to contract and expand with the length of the text. The third column contains an image and needs to be 78 pixels (or about 10%) wide. Lastly, the fourth column should expand to fill what the other cells do not.

My trouble comes from needing everything after the text column (which is the second column) to automatically align left. That text column seems to want to take up the entire table space, while the third and fourth columns are collapsing (when I want them to butt up against the text column). See the diagram below if all this is unclear.

You can see an example of how it currently works at: <>
Just to show the client, I have everything set as percentage widths via CSS.

But I want it to look like this: <>

Here is a diagram of my table structure and what I want to accomplish: <>

Any help would be much appreciated.

[edited by: SuzyUK at 10:19 pm (utc) on June 4, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

[SuzyUK]

hi mikemalphurs

sorry for missing this for so long

your HTML code actually shows the table to have 3 cells maybe you've changed it now? (that's why we prefer code and not links)

anyway here's the HTML/CSS for folks to see, incase

<div class="Header">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="Header_TDMain" >
<tr>
<td class="Header_TD1"><img src="../images/Misc/Misc_Spacer.gif" alt="" width="65" height="1" /></td>
<td class="Header_TD2"><h1>About Us</h1></td>

<td class="Header_TD3"><span class="Header_TD2"><img src="../images/Misc/Misc_HeaderFox.gif" name="TitleBar_Fox" width="78" height="44" id="TitleBar_Fox" /></span></td>
</tr>
</table>
</div>

CSS:
.Header_TDMain {
background-image: url(../images/Misc/Misc_HeaderDots.gif);
background-repeat: repeat-x;
}
.Header_TD1{
width:65px;
}
.Header_TD2 {
background-color:white;
white-space:nowrap;
}
.Header_TD3 {
width:90%;
}

the first and 3rd cells have a "dot" repeating background image (set on table)
the actual <img> in the third cell is changeable depending on site section and the second cell containing the text is of no fixed size, varies with text

as far as i can see it is doing what you want, are you still having a problem with this?

[mikemalphurs]

I FINALLY got it to work after much experimentation... Thanks for taking the time to look into it!