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 JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

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:

You can nest lines in lines but not columns in columns. .wfull{ width:100%; background:orange; } .w950{ width:950px; }

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:).