Hi there I'm not sure the best way to 'phrase' this question but I was wondering if anyone knows the best possible solution for our situation. We have a css table-style layout in divs and classes. My query is: what is the best way in CSS to allow for dynamic height in each row so that if one cell in the row requires 2-3 lines of content, the rest of the row will default to the height of that cell that contains the most content.
Here's an example of some of the CSS we have set up for the rows and a cell:

Each row contains a class="col-row"; .col-row {

border-bottom: 3px solid #FFFFFF;
float: left;
margin: 0;
position: relative;
width: 100%;

} Each row then contains a unique class for each cell for example: .col-row-occupance {

background-color: #CCCCCC;
border-right: 3px solid #FFFFFF;
float: left;
height: 28px;
margin: 0;
padding: 0;
text-align: center;
width: 83px;

} See attached email source file of example image or view it here - http://i54.tinypic.com/v4ur1s.jpg.

Please let me know if you would like to see all of the CSS. Actually, you can view it here...

http://www.bbh.co.nz/bbh_HostelSearch.aspx?bbh=detail&HostelID=347 It's the Accommodation table I am referring to. Thanks very much for your support.

2 answers

1
point

Actually, I think the best answer to your problem (assuming I understand it correctly) is to use a table instead of CSS to mimic a table.

Web designers have been screaming about how terrible tables are for design for years now. It probably has made everyone afraid to use tables at all. And it is true that tables shouldn't be used for design. But tables are perfect for tabular data, and it seems like that is what you have here. So I'd say use a table and save yourself the headache. This is what tables are for.

Answered about 8 years ago by Abinadi Ayerdis
  • If its tabular data, use a table, and what you have is clearly tabular data. Do it right with a semantic & accessible table. Tony Crockford about 8 years ago
  • Thanks for the feedback. I had a feeling that would be the answer and was living it hope that I could do this with CSS at this stage of technology. However, it's not to be and I will have to revert to tables. Cheers Felicia about 8 years ago
  • Its not a failure. Tables are for tabular data, they're just not for page layout. Use a table and style it with CSS, add some javascript for sorting and it's perfect. Tony Crockford about 8 years ago
0
points

If you really can't see that a table for tabular data is the correct solution and you don't need to support really old browsers, you could use the display:table CSS properties:

http://www.quirksmode.org/css/display.html#table

Answered about 8 years ago by Tony Crockford
  • Hi Tony. Thanks for the link. It's not that I can't see supporting tables for tabular data, it's about following a theme we already have in place so we can carry through with the same coding practice. But this display: table may be just the answer I require as a work-around. Thanks very much Felicia about 8 years ago