On Nov 4, 2006, at 8:22 PM, Rob O'Rourke wrote:

and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle e.g. |400px| 30px |400px| */ .left, .right { height: 60em; width: 400px; margin-bottom: 30px; } / * whatever your dimensions need to be */
.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per the image and you have a nice semantic unique id on each to apply styles with. Might need some tweaking for cross-browser goodness but in a fixed width layout that code should be safe to work from.


Rob, I am playing with your suggestion this moment. Setting height in EM seemed a very good approach, even for rows that have different lenght of contents. When I tried enlarge the font size in Firefox and Safari, it however gives an undesirable space at the bottom of each row, the same goes to deduce the font size.

I am thinking, perhaps it's best to combine yours and Georg' suggestion, using table-row and table-cell for display element for advance browsers, then feeds IE 6 and 7 the height with EM,. IE 7 has zoom feature like Opera, this maybe a more sensible approach?

Regards,

tee


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to