Tables to CSS conversion: 5 columns, 1 of them fluid. Impossible?

[Ryaske]

I am hoping some of you CSS gurus could help me figure out the solution to the following. I have spent far too many hours trying to get it working.

instead of putting the code here (it got messy because I cannot use tabs), please see this HTML page:

[small]<snip>[/small]

I need column B to be fluid, expanding or contracting both width and height given a changing viewport size (or text content). All the others have a fixed width.

All 5 columns MUST remain on one row, with no wrapping (a problem I'm having)

columns C,D, and E have to stick to the right side of the browser. Column A must stick to the left, with Column B sticking to that, and column B filling the space between A and C,D,E.


Below the HR you can see how it was done using Tables. How that code performs when resizing the broswer is how I need the CSS version to operate. I am VERY MUCH CONSIDERING keeping the tables to make this work a lot easier... pelase convince me that is not necessary!

Also .. this code is going inside of a much larger page. But once I get this concept down, I can probably put it in there without needing more help.

Thanks in advance for any help!

[edited by: limbo at 6:32 pm (utc) on Mar 31, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]

[limbo]

Hi Ryaske

Welcome to WebmasterWorld [webmasterworld.com] :)

Can you strip you HTML and CSS down the bare basics and we'll have another look?

[Ryaske]

yes, I did strip it down but the size of it still makes it messy. Plus, it was helpful to actually see the parsed HTML resize when the browser size is altered (which is why I went with the link).

However, here is the code again:

<STYLE type="text/css">
.row {margin-top: 7px; width:900px;}
.col-a, .col-b, .col-c, .col-d, .col-e {height:75px;} 
.col-a {float:left; width:75px;}
.col-b {float:left; white-space:normal;}
.col-c {float:left; width:80px; padding: 0 8px 0 8px;} 
.col-d {float:left; width:45px;}
.col-e {float:left; width:45px;}

#right {float:right;}

/* vertical aligns */
.col-c, .col-d, .col-e {display: table; overflow: hidden;}
.col-va {display: table-cell; vertical-align: middle;}

.clear {clear:both;}
</style>

<div class="row" style="border:1px solid red">
<div class="col-a">
<A HREF="/Product/url">
<IMG WIDTH="65" HEIGHT="75" BORDER="0" ALT="Product photo" SRC="/Product/thumbnail.jpg"></A>
</div>
<div class="col-b">
<A HREF="/Product/url"><B>Greatest Product Ever</B></A>
<div class="descrip">
This is the text where we describe the product. It can sometimes be short and simple. But it can also be rather long, like this one.
I need the CSS to deal with it.
<BR>
sometimes there are also line breaks.
</div>
<a HREF="/Product/url">View&nbsp;Product&nbsp;Details</a>
</div>
<div id="right">
<div class="col-c">
<div class="col-va">
<strike>$99.95</strike><BR>
<font color="#ff0000"><b>Sale!&nbsp;</b><B>$59.95</B></font>
</div>
</div>
<div class="col-d">
<div class="col-va">
<form style="MARGIN: 0px" action="/additemtocart.php?blah=blah" method="post">
<INPUT id="add1" size="1" name="add" TYPE="text" VALUE="1">
</div>
</div>
 <div class="col-e">
<div class="col-va">
<INPUT TYPE=IMAGE BORDER=0 SRC="/images/buy.gif" alt="buy button">
</div>
</div>
</div><!-- close right div -->
<br class="clear">
</div>


<HR>
below is done with tables. This is how I want the CSS version above to work:<BR><BR>

<table width="100%" style="border:1px solid red">
<TR>
<td><!-- valign=top align=center width=75 -->
<A HREF="/Product/url">
<IMG WIDTH="65" HEIGHT="75" BORDER="0" ALT="Product photo" SRC="/Product/thumbnail.jpg"></A>
</td>
<td>
<A HREF="/Product/url"><B>Greatest Product Ever</B></A>
<div class="descrip">
This is the text where we describe the product. It can sometimes be short and simple. But it can also be rather long, like this one.
I need the CSS to deal with it.
<BR>
sometimes there are also line breaks.
</div>
<a HREF="/Product/url">View&nbsp;Product&nbsp;Details</a>
</td>
<td valign="middle">
<strike>$99.95</strike><BR>
<font color="#ff0000"><b>Sale!&nbsp;</b><B>$59.95</B></font>
</td>
<td valign="middle">
<form style="MARGIN: 0px" action="/additemtocart.php?blah=blah" method="post">
<INPUT id="add1" size="1" name="add" TYPE="text" VALUE="1">
</td>
 <td valign="middle">
<INPUT TYPE=IMAGE BORDER=0 SRC="/images/buy.gif" alt="buy button">
</td>
</tr>
</table>

It would be much more readable if the tabs could remain when I use CODE, but oh well. Thanks for the help!

[limbo]

Hi Ryaske

Try floating you columns, A and B left, your columns D and C right (all fixed width) and absolutely positioning your central, flexible content column C with left and right properties that match the total widths of A+B and C+D.

I've no idea if this works well IE6 but I did something similar a few months back that worked perfectly in all other browsers.

[Ryaske]

Thanks limbo, that worked well!

But now it brings another problem. That absolutely positioned div will not expand to fit the height of it's contents. I can either hide the overflow, use auto to show the scroll bars, or let it hang out of that div and its container (.row).

None of these are acceptable solutions for the application.

I've tried clearing that div, but no matter what I do it won't fix the issue. I guess because it is position: absolute and therefore out of the flow.

Any ideas on a work around? Or different solution?

I will continue to google around for an answer but so far no luck :(

Thanks again for the help! I wish CSS was more straight forward. Tables may be ugly, but they work.

[Ryaske]

herro?

[Ryaske]

well I'm just gonna go with tables for this one part. No use wasting time trying to figure this out when tables worked fine in the first place. The rest of my site and the table itself will be formatted in CSS .. so hopefully you guys dont go CSS-nutso on me :)