Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

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

    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Last edited by Doctor_Varney; 09-06-2010 at 01:16 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    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"
    Last edited by Lerura; 09-06-2010 at 02:13 PM.

  • The Following 2 Users Say Thank You to Lerura For This Useful Post:

    Doctor_Varney (09-06-2010), effpeetee (09-06-2010)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    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.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Quote Originally Posted by effpeetee View Post
    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.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by lerura View Post
    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
    Last edited by effpeetee; 09-06-2010 at 04:41 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by effpeetee View Post
    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
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #11
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Last edited by Doctor_Varney; 09-06-2010 at 06:27 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Yes, Frank. I know exactly how you feel (and you know how I get sometimes!)
    Keeps me out of mischief.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by effpeetee View Post
    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.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by SB65 View Post
    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
    Last edited by effpeetee; 09-06-2010 at 09:15 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Quote Originally Posted by effpeetee View Post
    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
    Last edited by Lerura; 09-07-2010 at 07:29 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •