Re: [css-d] Equal-length columns - display: table-cell OK?
On 4/9/14, 8:12 AM, Barney Carroll wrote:
On 9 April 2014 16:00, Freelance Traveller wrote:
First, is display: table-cell a viable solution for the layout issue?
caniuse suggests that if I don't feel a need to support IE7 or earlier,
I should be OK, but caniuse doesn't always tell the whole story.
[...]
I've built dozens of sites using Stubbornella's OOCSS grids module which
specifically uses display: table-cell with a zoom: 1; fallback to make the
last element of a 'row' occupy the full remaining width. The OOCSS project
is a bit of a mess these days (it never was as popular as it deserved,
probably down to very poor visibility and maintenance) – it requires you to
deploy virtual machines just to build the CSS (!) – but I currently use the
following SCSS extension to achieve the desired effect:
@mixin fill-remaining-width {
display : table-cell;
float : none;
width : auto;
*zoom : 1;
&:after {
clear: both;
color: transparent;
display: block;
visibility: hidden;
overflow:hidden;
height: 0 !important;
line-height: 0;
font-size: xx-large;
content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x";
}
}
I like!
That use of the :after content is a clever way of preventing the "shrink-
to-fit" nature of table cells creating a smaller width box than intended. The
same goes for some other properties that add a new block-formatting context,
such as inline-block.
Thanks. Wish I had thought of that. :)
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal-length columns - display: table-cell OK?
On 9 April 2014 16:00, Freelance Traveller wrote:
> First, is display: table-cell a viable solution for the layout issue?
> caniuse suggests that if I don't feel a need to support IE7 or earlier,
> I should be OK, but caniuse doesn't always tell the whole story.
>
The special 'taken out of flow' you're describing is a result of what
Stubbornella calls a 'new formatting context'. display: table-cell is a
gods-end for this purpose. Old IE actually had this all catered for with
zoom: 1; – more here:
http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix/
I've built dozens of sites using Stubbornella's OOCSS grids module which
specifically uses display: table-cell with a zoom: 1; fallback to make the
last element of a 'row' occupy the full remaining width. The OOCSS project
is a bit of a mess these days (it never was as popular as it deserved,
probably down to very poor visibility and maintenance) – it requires you to
deploy virtual machines just to build the CSS (!) – but I currently use the
following SCSS extension to achieve the desired effect:
@mixin fill-remaining-width {
display : table-cell;
float : none;
width : auto;
*zoom : 1;
&:after {
clear: both;
color: transparent;
display: block;
visibility: hidden;
overflow:hidden;
height: 0 !important;
line-height: 0;
font-size: xx-large;
content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x";
}
}
Regards,
Barney Carroll
barney.carr...@gmail.com
+44 7429 177278
barneycarroll.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Equal-length columns - display: table-cell OK?
Currently, my website (Freelance Traveller, http://www.freelancetraveller.com) has slightly messy CSS to give the following appearance (view fixed font): ++ |Header | ++---+ |Nav |Content| |Menu| | || | || | || | || | || | ++---+ |Footer | ++ The header and nav menu have black background; the content is an off-white background, and the footer has a thick border-left to make it appear as though the nav background extends to the bottom. In order to make the design work, the content ended up with a thick margin-left and border-left. Right now, the nav and the borders on the content and footer are sized in px. I was going to simply change to ems, but then I thought that it would be a good idea to clean up the CSS _if I could_. It took me quite a bit of work to find a _simple_ way of doing it that would extend the shorter of the two columns (nav or content, usually nav) _without_ nasty hacks like resetting padding and margins by thousands of pixels - or at least something that _appeared_ to do it. The solution I found was display: table-cell. The HTML structure is currently Those classes COULD be converted to IDs, as there's never more than one of each. I haven't done that yet, as there's over 1000 pages that I'd have to do it on. However, I use a linked style sheet, so I would just have to change the one CSS file. The key change would be to change the nav and content divs to "display: table-cell"; this would appear to allow me to cut out some fiddling of margins and padding that were needed because floating the nav (as I had been doing) took it out of the document flow. There are some other changes that I am contemplating. However, I wanted to try to tap the collected wisdom here before doing so. Thus, some questions: First, is display: table-cell a viable solution for the layout issue? caniuse suggests that if I don't feel a need to support IE7 or earlier, I should be OK, but caniuse doesn't always tell the whole story. Second, does a DIV whose width is set in ems get sized based on its own font-size, or that of its parent element? This is important, as the nav's own font size is set to 0.75 em - so if I want it to be 15ems of the parent font size, but it uses the smaller em size of its own font-size, I'd have to set it to 20 ems, and the border of the footer (which would need to remain) would need to be calculated separately as well. Unrelated to the structure/display issue, but something that it's been suggested I consider: Is there a way that I can put a link at the beginning of the page that jumps directly to the content that would be 'visible' to "voice browsers" for the visually impaired, but not to the general graphical-browser user population? -- Jeff Zeitlin, Editor Freelance Traveller The Electronic Fan-Supported Traveller® Fanzine and Resource edi...@freelancetraveller.com http://www.freelancetraveller.com http://freelancetraveller.downport.com/ ®Traveller is a registered trademark of Far Future Enterprises, 1977-2014. Use of the trademark in this notice and in the referenced materials is not intended to infringe or devalue the trademark. Freelance Traveller extends its thanks to the following enterprises for hosting services: CyberNET Web Hosting (http://www.cyberwebhosting.net) The Traveller Downport (http://www.downport.com) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
