Cell widths aren't static!

[Whatknows]

I am fairly new to CSS, so please bare with me. I am struggling with a page that has a three column setup:

<tr id="content"> 
    <td id="menu"> 
      <? $menu->build_menu(); ?>
    </td>
    <td id="bar"> 
      <div align="center"><img src="images/bar.gif" width="8" height="500"></div>
    </td>
    <td id="page"> 
	<? include("pages/".$page_info['page_url']); ?>
    </td>
</tr>

Ovbiously, the first is for a menu, the second is a graphic break that I couldn't replicate very well in CSS, and the third is the page content. PHP is used to generate the menu and to include the appropriate content file.

The CSS for these items is:

tr#content {
	background: white;
	vertical-align: top;
	border-width: 0;
}
tr#content td {
	padding-bottom: 20px;
}
td#menu {
	margin-left: 20px;
	width: 250px;
	padding-right: 20px;
}
td#bar {
	width: 30px;
}
td#page
{
	padding-top: 20px;	
}

The menu is supposed to take up 250px, no more and no less. Same with bar, but only 30px. The issue is that on pages where "page" doesn't have a lot of content, or where the content isn't very wide, the menu and bar get aggressive and take up the rest of the space. This doesn't help to create a very consistant look across pages.

I have tried max-width, but not only did it not work, it only has meager cross-browser support. I want the "page" to take up the remainder of the space, not the other two.

Any help would be greatly appriciated! Thanks!

[BenANFA]

The problem you are having is that you are using tables If you are using CSS then tables should not be required.

If you HAVE to use tables then set the column widths either directly in the td tag or in a col tag. It'll work better in the browsers that are less CSS complient.

However why not try a totally CSS layout ?

I'd use

<style>
body, html {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: white;
}

#menu {
  width: 250px;
  float: left;
}

#bar {
  width: 30px;
  float: left;
  margin-left: 11px;
}

#page {
  margin-left: 280px;  
}
</style>

<div id="menu"> 
    <? $menu->build_menu(); ?>
</div>
<div id="bar"> 
    <img src="images/bar.gif" width="8" height="500">
</div>
<div id="page"> 
    <? include("pages/".$page_info['page_url']); ?>
</div>

That's one way, other people might choose to use absolute positioning for the menu and separator bar.

[Whatknows]

I suppose I should take the plunge. Any recommendation on a table replacement tutorial?

[Ian Glass]

SP has a nice series of articles and a book, Designing Without Tables that're probably up your ally. Also, take a gander over at some of the earlier CSS articles the ALA archives. :-)

~~Ian

[Whatknows]

Thanks!