Extending and rowspan

[snowieken]

As a web developer, I am fully aware of the benefits of a CSS design towards a table design, but that leaves me with the unability to solve a seemingly simple problem whenever tables are required.

With data retrieved from a database, I have to create the layout pictured here (http://www.woutichon.be/rowspan.html). As you can see, the fields in the database which have to be displayed are title, further information and a picture. The layout in this example is, as you can see by the code, nowhere adjusted in height.

The problem is that it should be like this (http://www.woutichon.be/rowspan2.html). The title is never a big field, and the info cell is vertically aligned to the top so that the information comes right under the title. But in order to achieve this design, I have to set the height fixed of the blue cell, rather than the yellow one (while it is actually the yellow cell that needs a fixed height). The pictures from the database are of different sizes, so it is impossible to set the blue cell to a fixed height, because that's the one that should be extending (and not the yellow one).

I am sure this can be fixed by using a main table with one row and two cells, and then use a nested table in the second cell so that the first cell has no influence whatsoever on it, but the problem is that this table layout is already implemented in the framework the client is using. It might be possible to rewrite it and then reimplement it, but it would of course be much faster if there is some kind of CSS solution to giving the yellow cell a fixed height, not depending on the red cell.

I hope I made myself clear a bit. ;)

[ronaldb66]

Why use tables for this?
I don't know if you have anything in particular in mind with those colors, but will take that bridge when we get there; markup and style wise, create a container (div?) to hold the image, title and description, all marked up nicely and semantically, float the image left and give the title and description a sufficient left margin to clear the image in case the description would run further down then the image is high.
Use margins / padding to give the title and description sufficient white space; you can give the title a fixed height, but it would probably be better to let the contents determine the height.

Markup could be something like this:
<div>
<img src="..." alt="..." />
<h3>Title</h3>
<p>Description</p>
<p class="clearer">&nbsp;</p>
</div>
Instead of a div, the outer container could well be a list item if a list is used to mark up a number of image-title-description sets; I'll leave the preliminary styles for you to figure out... :D

[snowieken]

As I said, personally I am all in favor of CSS layouts as well. But in this case a table layout is required. It's pretty hard to explain, but I hope it is sufficient to say that the framework this is implemented in is pretty outdated - basically everything is done with tables. The system is hopefully going to be updated in the future, but for now I have to use tables, there is no other way around it. If I could use any HTML code I wanted, I probably wouldn't be asking this question either.

The colors are not at all representative for the final result at all, by the way, it's just a little HTML fragment I made to show how it is supposed to be layed out. Giving example table cells a color to have them stand out is a bit of a habit I've grown into for some dark obscure reason. :)

Summarized: a fixed height to one of the right table cells is ignored in IE when the left cell is extended. IE just appears to extend both cells to his own pleasure. Firefox shows everything okay, so I was wondering if there was a way to make this work in IE with this HTML setup.

Thanks for your answer, though.