CSS fluid grids across browsers

Question

I'm creating a grid system for a bunch of our own apps / portals. We have the basic grid width and gutter, etc in place; but we are considering making the grids a little responsive. Considering that, we wanted to make an elastic grid system. While, Ethan Marcotte does pen down the basics of responsive design neatly in his book, he doesn't consider talking about the effect of this approach in browsers...sigh..

As far as I have explored, percentage widths (which are essential for a fluid / elastic layout) have been a major pain for Opera + Safari. This is a prevalent bug in Opera, and even the fluid 960gs is faulty on Opera + safari.

The only place where I could find percentage widths working was in YUI2. Any YUI developer around interested in detailing out how they made percentage widths work on Opera / Safari ??

This is an SOS, for experienced developers and grid creators, who could advise / guide on workarounds / solutions to make such a thing work across browsers.

Thanks a ton! Sanjay

score 1 · Answer 1 · answered Jul 18 '11 at 21:08

I don't know what you mean saying "responsive layout", but if it is about fluid width then the answer is one. OOCSS Grids.

You need to remember that lines and units (columns) can't have margins and paddings here. Inner elements can have them. By "object oriented CSS" is an idea where you use multiple classes in one HTML tag so you can create class:

.inner{
    margin:16px; /* or whatever CSS size you like */ 
}

and apply it to every direct child of line or column like:

<div class="myContent inner"/>

You can nest lines in lines but not columns in columns.

.wfull{
    width:100%;
    background:orange;
}
.w950{
    width:950px;
}
<div class="line wfull">
    <div class="line w950"/>
</div>

If you like to see more complex working example of OOCSS (I enhanced grids pretty much and changed names: line->container, unit->column, size1of2->half and so on) check:

asyncode.com

Here is (not completed yet) documentation on my enhancements:

docs.asyncode.com/text/RichML-reference

OOCSS works behind the scenes there, but names are copied 1:1 to HTML, so you will know what it is about.

I tested OOCSS in many browsers and there was no single one which couldnt handle it. This was possible because of very nasty CSS hacks that Nicole Sullivan found or invented - don't try it at home:).

score 0 · Accepted Answer · answered Jul 12 '11 at 10:05

0

I think this might help you out on that. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

answered Jul 12 '11 at 10:05

Joonas

7,227
9
40
65

looks good..but this ain't exactly a grid system ? I'll try and create a grid system out of it, and see if it can match our use-cases - something more flexible to create any sort of layout and then nest with ease. Thanks a lot for this.. – hashpipe Jul 12 '11 at 10:47
Yea. When you cant get lemons you should go with potatoes and try to make them look like lemons. – Joonas Jul 12 '11 at 11:09

CSS fluid grids across browsers

2 Answers2