Comments on: Tables: The Next Evolution in CSS Layout

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 глючит :(