CSS/HTML/JavaScript Jello Table?

[kooia]

Hi everyone,

I want to make a page with a table. It has three TD's: 120px, fluid (

min-width:500; max-width:700px; /*This is for the fluid TD*/

), 120px. How am I supposed to write the table? Would

<table width="100%"></table><!--or--><table width="all"></table>

work? Or does anyone have an idea of how I should do this, because I'm pretty sure that a fluid table isn't the way to go, but I can't seem to figure out how to get the 120px parts to go around the fluid part.n Also, this is all in a DIV, so the 120px parts can't be

position:absolute; 
left:0;

or anything like that.

[scrappedcola]

I would set it up as

.tableAuto{
   width:auto;
}
<table class="tableAuto"></table>

I'm not entirely certain that you can place a min-width on a td but I do know that widths on tables are not always respected by any browser (and particularly IE). If you absolutely need the widths respected I would suggest using individual div's rather than the table. Also make certain you specify a doc type so the document isn't read as a Quirks mode document as IE won't recognize the min-width's you set.

[kooia]

Thanks, scrappedcola. Thanks for the div idea, but how would I do it? Right now, I have it set up like this:

|__fluid__|120px|_____fluid_______|120px|__fluid__|

The fluids on the sides are just the background. The middle three are part of a div. How would I get the middle to be fluid with DIV's? Would I use something like this?:

div.sideleft
{
position:relative;
top:0;
left:0;
}
div.sideright
{
position:relative;
top:0;
right:0;
}

Would that work? Considering I did do that, how would I get the middle DIV text not to write underneath the sides?

[scrappedcola]

If you want the div's to be side by side don't use position:relative just float them.

<style>
.fluid{
   min-width:500px;
   max-width:700px;
   float:left;
}
.solid{
   width:120px;
   float:left;
}
/* below is to combat any issue IE might have with the floated div's*/
.clearfix{
   zoom:1;
}
.clearfix{
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
</style>
<div id='containerDiv' class='clearFix'>
  <div class='fluid'>&nbsp;</div> <!-- I usually place an empty space there just so IE renders properly as it sometimes doesn't render empty content well -->
  <div class='solid'> Stuff here</div>
  <div class='fluid'>&nbsp;</div>
  <div class='solid'>Stuff here again</div>
  <div class='fluid'>&nbsp;</div>
</div>

[kooia]

Sorry it took me so long. Thanks for the reply, I'll check it out.

[kooia]

Yeah, thanks so much! Fixed my problem.