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.
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.
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.
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!
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.
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.
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.
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.
[/ot]