Cannot get table cells to be the same height. - html5/css3

effpeetee · 09-06-2010, 10:42 AM

This is an experiment to try to understand css display:table-cell etc.
The original code I have downloaded from the web and modified it to my required dimensions.
The table cells will not be the same height/length and I cannot find why.

I appreciate that it is still not finished, but the original site had equal cell lengths so I must have done something wrong.

I never was any good at tables when only html tables very available.
Any help would be much appreciated. I have been working on this forn several days and I am beginning to get war weary.

Rescue urgently required.

Frank

SB65 · 09-06-2010, 12:08 PM

Hello Frank

It's the float settings on your table-cell divs that are causing the problem. Remove the floats and those three divs have the same height. You might need to change the order of your html to get the divs ordered correctly.

Doctor_Varney · 09-06-2010, 12:12 PM

Hey Frank. Ain't Firebug great for checkin' out someone's code!?

First thing that occurs to me is, if you're displaying divs as 'table' then why float?

To me (and 'tis just my own humble reasoning) the whole point of a table is to build a matrix - a grid - whose columns and rows must have equal height, by it's very definition!

Wheras, tables are linear and logical, floating is what I call an 'abstract behaviour' because it requires to transcend the 2 dimensions in order to do what would normally have been expressed as a linear structure.

Also, I presume 'display:table' creates a flow condition which precipitates the building of a matrix - therefore, floating (out of flow) must become unecessary... indeed, the antithesis of 'table'.

I have no idea what I'm talking about because I have never used this new property but those are the immediate thoughts which pop into my head.

No, I was never any good at tables either. That was more to do with it's attributes being inseparable from the markup. Everything is made easier with CSS - not just tables... except layout, which is always a challenge - even with the old methods.

Dr. V

Lerura · 09-06-2010, 01:07 PM

In order to it make work properly you have to nest the divs as if they were ordinary table tags:

Code:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

becomes

Code:

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell"></div>
    <div style="display:table-cell"></div>
  </div>
</div>

doing so, the divs automatically floats and "height"s just as if they were the related table element.

It is actually an alternative set of table elements.
so omitting e.g.<div style="display:table-row"> is just like omitting <tr> in the standard set. - It won't work

And they can't be combined:
e.g.
a <td> cannot go inside a <div style="display:table-row"> and vice versa.

The only noticable difference is that "table-cell"s by default is styled like a div (e.g. content is vertical top and no padding).
And AFAIK there is no equivalents to "rowspan" and "colspan"

effpeetee · 09-06-2010, 01:35 PM

Thanks for your help although I was taught not to use tables this wise, so I know almost nothing about them.

The code that I used was largely downloaded from a url that did work. All that I did was to alter the widths to suite my purpose. Since then, it does not work properly.

Frank

Lerura · 09-06-2010, 02:15 PM

As i see it, using "table" display is only suitable when you wanna float a group of divs and have them to have the same height.

effpeetee · 09-06-2010, 02:30 PM

Precisely. That is why I want to use them with html5 and css3. I just cannot find an article that makes it clear to me. W3 states that if any stage is omitted, the css will automatically insert it.

Ah well press on. Thank you all for your help. I am determined to get their if it is the last thing I do. (the way I feel at the moment, It may very well be so!)

Frank

Perseverance pays.

Lerura · 09-06-2010, 03:00 PM

Quote:

Originally Posted by effpeetee

W3 states that if any stage is omitted, the css will automatically insert it.

testing it, I found that it is so, at least in my version above.

effpeetee · 09-06-2010, 03:25 PM

Quote:

Originally Posted by lerura

testing it, I found that it is so, at least in my version above.

What version above? I'd like to see it.

This is the original version.

Frank

Doctor_Varney · 09-06-2010, 05:16 PM

Quote:

Originally Posted by effpeetee

I am determined to get their if it is the last thing I do. (the way I feel at the moment, It may very well be so!)

Frank

Perseverance pays.

Yes, Frank. I know exactly how you feel (and you know how I get sometimes!) Stick at it, mate! You're a gentleman, a scholar and an innovator.

Dr. V

Doctor_Varney · 09-06-2010, 05:22 PM

So, were we right? The floating was not needed, yes?

Lerura's post seemed to be the brightest light at the end of the dark tunnel. So, what you're saying is, that each div takes on the function of a seperate element of the old HTML table...? If so, it makes perfect sense, though doesn't seem so different to the way I've been using divs just lately in one of my own experiments. It opens a box of questions for me. But that's cool. Cheers!

Dr. V

effpeetee · 09-06-2010, 05:26 PM

Quote:

Originally Posted by Doctor_Varney

Yes, Frank. I know exactly how you feel (and you know how I get sometimes!)

Keeps me out of mischief.

Frank

SB65 · 09-06-2010, 05:26 PM

Quote:

Originally Posted by effpeetee

What version above? I'd like to see it.

This is the original version.

In that version none of the "table-cell" divs are floated, and additionally there is a wrapper div which has display:table. As per earlier post if you remove the float from #navcol, #sidecol and #main then then your original code isn't far off - certainly the columns are of equal length.

effpeetee · 09-06-2010, 08:09 PM

Quote:

Originally Posted by SB65

In that version none of the "table-cell" divs are floated, and additionally there is a wrapper div which has display:table. As per earlier post if you remove the float from #navcol, #sidecol and #main then then your original code isn't far off - certainly the columns are of equal length.

I think we are getting there. This incorporates your suggestions. Thanks to you all for putting up with me. I have a bit of a bee in my bonnet over this project. I want to get it right before my next birthday.
I was born 14th September, 1925

It's here to view. I still need to add the rounded corners but I know how to do that.

Frank

Lerura · 09-07-2010, 06:26 AM

Quote:

Originally Posted by effpeetee

What version above? I'd like to see it.

Oh sorry! by " version above" I meant the div version from my first post:

Code:

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell"></div>
    <div style="display:table-cell"></div>
  </div>
</div>

I styled it with colors and filled the "cells", and omitting <div style="display:table-row"> made no difference to the output, confirming that omitted stages are automatically inserted by CSS.
At least in this simple version