css div problem

Question

Hi,

I have this type of arrangement

...<td>
       <div></div>
       <div></div>
       <div></div>
   </td>

The div tags are filled with dynamic data. I have put the div tags in the td cell because the center div is filled with an image, which can be different heights. What I am trying to do is get the top div to align to the top of the cell, the bottom div to align to the bottom, and the center div, which contains the image, to fill the entire space in the middle and be center aligned. All my attempts so far have failed and for some reason (yes I have looked and there is no competing styling) I cannot get the divs to fill the available space. I have tried encapsulating the divs in a container div but this didn't work either. Your advice/help please :)

Thanks, R.

Answer 1

there are some handy CSS properties you should look.

box-sizing (pls, start googling for this one).

margin, padding, vertical-align...

table-padding..

consider using "auto" as value for some centering.

Answer 2

The easiest way is to forget the divs and use table cells instead. The advantage here is that when you set a height to the table, the cells will automatically fill all the space. This way you can define a fixed height to the top and bottom cell, and the middle cell will take up the remaining space.

Example: http://jsfiddle.net/KaWPS/

And if you don't use fixed heights you'll see that the cells take whatever they can get, and the rest is divided over the rest of the cells: http://jsfiddle.net/KaWPS/2/