Comments on: Equal Height Columns with CSS Flexible Box Layout http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/ Sun, 24 Jan 2010 18:22:18 +0000 http://wordpress.org/?v=2.8.6 hourly 1 By: fluelosef http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-143 fluelosef Sun, 01 Nov 2009 03:14:18 +0000 http://www.acleon.co.uk/?p=158#comment-143 Other variant is possible also Other variant is possible also

]]> By: AndyLeon http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-81 AndyLeon Mon, 19 Oct 2009 17:58:56 +0000 http://www.acleon.co.uk/?p=158#comment-81 Divs are normally block-level elements, but setting the display to -moz-inline-box or -webkit-inline-box changes that element to an inline one. You can't use the auto value for margins on inline elements, so you need a regular block-level on the outside to compensate. I haven't fully checked the spec to see if it's right to convert it to an inline element, but judging from the name of the property and the fact that it renders this way in both Webkit and Gecko, you'd assume that it's correct. Divs are normally block-level elements, but setting the display to -moz-inline-box or -webkit-inline-box changes that element to an inline one. You can’t use the auto value for margins on inline elements, so you need a regular block-level on the outside to compensate.

I haven’t fully checked the spec to see if it’s right to convert it to an inline element, but judging from the name of the property and the fact that it renders this way in both Webkit and Gecko, you’d assume that it’s correct.

]]> By: foo http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-72 foo Sat, 17 Oct 2009 02:54:06 +0000 http://www.acleon.co.uk/?p=158#comment-72 why do you need the extra div to make it centered? Couldn't just put a width and margin auto on the display:box div? why do you need the extra div to make it centered?
Couldn’t just put a width and margin auto on the display:box div?

]]> By: Bobby Jack http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-66 Bobby Jack Mon, 12 Oct 2009 21:15:07 +0000 http://www.acleon.co.uk/?p=158#comment-66 OK, I should have scrolled down and read more carefully ;-) Padding definitely present on the right, on Windows, though. OK, I should have scrolled down and read more carefully ;-) Padding definitely present on the right, on Windows, though.

]]> By: AndyLeon http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-65 AndyLeon Mon, 12 Oct 2009 21:11:02 +0000 http://www.acleon.co.uk/?p=158#comment-65 Hmmm, something strange going on clearly. FF 3.5.3 on the Mac is still showing no padding on the bottom for me. The Alpha 1 of 3.6 renders it perfectly though, so it's obviously being addressed. I think the two areas, although similar, serve two different purposes. The great thing about the columns model is the way the text flows through the columns and the great visual effect that comes from having these columns both top- and bottom-justified. This is more to do with content overflowing vertically, but everything adjusting vertically with it. Hmmm, something strange going on clearly. FF 3.5.3 on the Mac is still showing no padding on the bottom for me. The Alpha 1 of 3.6 renders it perfectly though, so it’s obviously being addressed.

I think the two areas, although similar, serve two different purposes. The great thing about the columns model is the way the text flows through the columns and the great visual effect that comes from having these columns both top- and bottom-justified. This is more to do with content overflowing vertically, but everything adjusting vertically with it.

]]> By: Bobby Jack http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-64 Bobby Jack Mon, 12 Oct 2009 20:55:22 +0000 http://www.acleon.co.uk/?p=158#comment-64 Hi Andy, Will be interesting in the coming months to see which offers the best real-life use: columns, or the flexible box model. This is a great, simple example we can use to inform that thinking - thanks! BTW, the padding looks fine to me on that middle 'column' (FF3.5.3). - Bobby Hi Andy,

Will be interesting in the coming months to see which offers the best real-life use: columns, or the flexible box model. This is a great, simple example we can use to inform that thinking – thanks!

BTW, the padding looks fine to me on that middle ‘column’ (FF3.5.3).

- Bobby

]]> By: AndyLeon http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-62 AndyLeon Sun, 11 Oct 2009 22:09:16 +0000 http://www.acleon.co.uk/?p=158#comment-62 Yeah, you're right Joel. That is a bit of pain, but I've found that it's only the "column-width: " property that causes the problem. If you use "-moz-column-count: " and "-moz-column-gap: " together, you can achieve the same effect. Yeah, you’re right Joel. That is a bit of pain, but I’ve found that it’s only the “column-width: ” property that causes the problem. If you use “-moz-column-count: ” and “-moz-column-gap: ” together, you can achieve the same effect.

]]> By: Joel Cory http://www.acleon.co.uk/posts/equal-height-columns-with-css-flexible-box-layout/comment-page-1/#comment-59 Joel Cory Thu, 08 Oct 2009 22:07:45 +0000 http://www.acleon.co.uk/?p=158#comment-59 Great demo. I did discover something unexpected, but this specification seems to conflict with the "column-width, column-gap" specs. I tried to make the center column in your layout flow multiple columns for the text. The column-width attribute directly affects the width of the flex width. Great demo. I did discover something unexpected, but this specification seems to conflict with the “column-width, column-gap” specs. I tried to make the center column in your layout flow multiple columns for the text. The column-width attribute directly affects the width of the flex width.

]]>