On 4/9/14, 8:12 AM, Barney Carroll wrote:
On 9 April 2014 16:00, Freelance Traveller <edi...@freelancetraveller.com>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/
