Comments on: Tables: The Next Evolution in CSS Layout

By: Darrel Karisch

Darrel Karisch — Mon, 03 May 2010 16:00:25 +0000

I have put together a proposal and sample Chrome implementation of a CSS layout extension described at http://blogs.eforceglobal.com/dkarisch/archive/2009/07/16/536.aspx.

With this generalized CSS layout solution HTML-like tables that include cell spanning can be achieved that require no special nonsemantic HTML mark-up… http://blogs.eforceglobal.com/dkarisch/archive/2010/03/15/544.aspx

you can download the proof of concept from http://downloads.eforceglobal.com/CSS/CSSScriptLayoutR21525.zip and check out the examples. The performance is better than you would imagine, Microsoft’s CSS Expressions notwithstanding. The executable should work on any windows XP box.

By: Paul Gardner

Paul Gardner — Sat, 20 Feb 2010 16:11:43 +0000

For anyone having top-alignment issues with this you need to specify vertical-align:top; for your divs defined as display:table-cell;

Simples,

Paul.

By: Paul Gardner

Paul Gardner — Fri, 19 Feb 2010 16:27:01 +0000

It may be a good idea for you to allow code snippets on a blog about the web?

My HTML got stripped from my comments above, to see my problem on a web page visit:

http://new.localcause.org.uk/users/login

Thanks,

Paul.

By: Paul Gardner

Paul Gardner — Fri, 19 Feb 2010 16:25:03 +0000

This is a great solution to using CSS to define tables for layout leaving HTML tables to be for data alone, however I have a slight issue with it in FireFox.

[code]
HTML:

Column 1 content

Column 2 content

[/code]

CSS:
[code]
.table {display:table; width:100%;}
.table .tablerow {display:table-row; width:100%;}
.table .tablerow .tablecell {display:table-cell;}
.layout2cr .column1 .columninner {padding:20px;}
.layout2cr .column2 {width:15em; border-left:1px solid #CCD0A6; background-color:#E0EFBE; -moz-border-radius:0 6px 6px 0;}
.layout2cr .column2 .columninner {padding:10px;}
[/code]

My problem is that .column2 .columninner is taking on board the padding-top value of .column1 .columninner.

No matter if I use margin or padding it takes the biggest value from either column and applies it to just the top of both columns.

Any ideas?

Paul.

By: OrvassM0r4

OrvassM0r4 — Thu, 14 Jan 2010 13:59:10 +0000

Do You like it? , ge 40 watt bulb, 2000 watt generator, 150 watt light bulbs, 4 channel 1000 watt amplifier, distressed stretch jeans,

By: Edwar5J

Edwar5J — Wed, 23 Dec 2009 10:48:31 +0000

Strong time. , latina anal movies, brazilian ass fucked, celeb free nude photos, busty asian milfs, sexy gay boys, small asian tits, sexy anime games, public fuck vids, free lesbian video download,

By: Cheltenham Web Design

Cheltenham Web Design — Tue, 15 Dec 2009 20:01:42 +0000

I love looking through these older articles where we expected IE8 to give us a helping hand! 2 or 3 sets of CSS is a much easier solution in most cases.

By: aemerz

aemerz — Wed, 11 Nov 2009 15:41:26 +0000

XaOFGd mhzzoinrkxpz, [url=http://sloaeynpuztw.com/]sloaeynpuztw[/url], [link=http://dytpuxahapda.com/]dytpuxahapda[/link], http://ajjxgeooczta.com/

By: Ryan Kelly

Ryan Kelly — Mon, 29 Jun 2009 17:21:30 +0000

Caution: DIV overload.

By: sohbet

sohbet — Wed, 10 Jun 2009 10:57:00 +0000

thanks admin good post

By: Dilanomoova

Dilanomoova — Sun, 17 May 2009 13:55:35 +0000

У вас верстка сайта в Opera 9.64 глючит :(

By: Trim Tools

Trim Tools — Sat, 02 May 2009 15:11:08 +0000

I have been trying to get my table info into my css file and out of the html. Thanks for the help.

By: Hiren Modi

Hiren Modi — Fri, 01 May 2009 09:06:45 +0000

awesome tutorials, Thanks.

By: German learning Course

German learning Course — Thu, 23 Apr 2009 12:36:49 +0000

good stuff.

By: Free Website Design

Free Website Design — Thu, 09 Apr 2009 22:00:13 +0000

As a web designer, this is something that irks me every time I have to do it. I have a beautiful CSS layout, then the client wants this here and that there instead. I've learnt long ago not to try and argue with them, instead, I just sigh, and do what I need to do in an HTML layout. Never ceases to hurt me inside every time I need to do it though.

Thank you for showing me there is an end to my pain in sight!

By: Free Website Design

Free Website Design — Thu, 09 Apr 2009 22:00:00 +0000

By: Jake

Jake — Wed, 25 Mar 2009 23:55:48 +0000

It's a nice idea but look at the hack you had to put in just for IE7. I can only imagine that IE6/5 aren't too happy about it (sorry i'm on a mac- no IE).

But basically you've had to write two sets of CSS which i know designers aren't going to be able to get their head round – i'm a designer btw so i can say that ;-)

By: Jake

Jake — Wed, 25 Mar 2009 23:55:00 +0000

It's a nice idea but look at the hack you had to put in just for IE7. I can only imagine that IE6/5 aren't too happy about it (sorry i'm on a mac- no IE). But basically you've had to write two sets of CSS which i know designers aren't going to be able to get their head round – i'm a designer btw so i can say that ;-)

By: psd to any design

psd to any design — Wed, 18 Mar 2009 19:23:19 +0000

it's a pity! but It does not work in IE 6 :(

i have IE 6, but some clients want layouts for ie 6 too

By: psd to any design

psd to any design — Wed, 18 Mar 2009 19:23:00 +0000

it's a pity! but It does not work in IE 6 :(i have IE 6, but some clients want layouts for ie 6 too

By: Will

Will — Sun, 01 Mar 2009 03:44:48 +0000

One question on the sample. What's the purpose of the “skipto” container?

I like the idea that CSS can do layout. Although personally, I'd like to separate “style” from “structure”, as if the frame is not part of the painting.

By: Will

Will — Sun, 01 Mar 2009 03:44:00 +0000

One question on the sample. What's the purpose of the “skipto” container?I like the idea that CSS can do layout. Although personally, I'd like to separate “style” from “structure”, as if the frame is not part of the painting.

By: Sean Stewart

Sean Stewart — Fri, 13 Feb 2009 19:58:25 +0000

Fantastic article… right after reading I ad to build a prototype of my own. One question that has always plagued me though…. why is it necessary to add the border to the header and footer in order for it to expand around it's content and not just the text itself?

I've ran into this before, but have never known the technical explanation. Any ideas?

By: Sean Stewart

Sean Stewart — Fri, 13 Feb 2009 19:58:00 +0000