SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice on using CSS display:table layouts, display:table-cells, I may be overkilling

    Greetings,

    So I started off my design thinking alright, just read this sitepoint book and it had great information relating using display:table for laying out a website instead of floating divs all over the place. Turns out I may have put my hands too deep into the shark tank while thinking it was a goldfish tank. It's been awhile since I touched a website, so I was thinking maybe display:table is the way to go for all my future layouts.

    However, it looks like if I want to go this route that my code may just be overkill. Since I need a div.table, div.row, and div.cell containers. On top of that, it looks as though to do any type of position inside of a cell that I will need to create another table inside the div.cell, adding even more code.

    For example one of the position issues I had can be found in this thread: http://www.sitepoint.com/forums/show...lay-table-cell


    Without going onto a rant, since I have been up almost 24 hours.. I was wondering if anyone can provide any advice, tips, or comments on doing anything via this method. Should I just stick to the good ol fashion floating and relative/absolute positioned divs? Should I consider the use of CSS table layouts the same as html table layouts and just leave it for tabular data? Or should I just not care about all the extra div code and use this method.

    I know this is all personal opinion and a case by case basis, but if you were doing a project would you even consider this? I did my entire site like this, but now that I want to customize a few things.. I am just seeing the limitations.

    Thank you again for any advice and input!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by 4SeeN View Post
    I was thinking maybe display:table is the way to go for all my future layouts ... I was wondering if anyone can provide any advice, tips, or comments on doing anything via this method.
    Yeah, that book went a bit over the top, IMHO. display: table is very useful in small doses, but for whole page layouts it's rarely a very good option, if ever. Floats still rule, and will continue to do so until support for the more advanced CSS3 layout options gain widespread browser support.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph, i am starting to think you have created robots which stay on sitepoint answering questions all day. No matter the time, you answer and not only that but you answer with an answer that is actually useful and provides insight. . I don't know how you do it, but when they figure out how to clone brains I will gladly pay to clone yours!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by 4SeeN View Post
    ralph, i am starting to think you have created robots which stay on sitepoint answering questions all day.
    Damn, we've been exposed as a bunch of automated bots! Seriously, though, I just pop in an out through the day when I'm near the computer. I've been out chopping wood much of today, believe it or not.

    Glad to be of some help.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    If you can provide us with a picture, drawing, description, or link to a web site of exactly what you want to achieve, perhaps someone can help. I have 3 browsers on my PC and all of them rendered your earlier code differently, so I was never able to determine your objective. Were you experimenting or did you have a plan for the layout? My "contribution" to the conversation was pretty much a wild shot. Please tell us exactly what you want to do, and how you want it to work, and we might be able to offer better guidance. Tables were the original "responsive design" tool before "responsive design" was in vogue but they are not suitably supported in CSS. Other techniques could easily be more satisfactory these days. I still use HTML tables and some CSS tables, so my feet are wet with them; and they fit nicely where they are used. I also float a huge amount of stuff. Depends entirely on the layout. Let us know when you can describe your plan.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    display: table is very useful in small doses, but for whole page layouts it's rarely a very good option
    yup; consider that you would still need to mark up your page like if you were coding a table.. 7 times out of 10 this means you coded the HTML to to fit the design (and not the content) which is bad.

    Then here is the fact that I doesn't get display:table. REALLY BAD.

    Also, display: table, table-row, table-cell, etc. nixes your ability to relative or absolute position the element

    The only advantage to display table ( other that to auto clear or fix whitespace bugs is to quickly create equal height "columns". Still nesting divs and floating will give you the same results.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    The only advantage to display table ( other that to auto clear or fix whitespace bugs is to quickly create equal height "columns".
    I would also add vertical centering as something that table display helps a lot with.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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