CSS Layout
CSS layout is so flexible you could spend a lifetime exploring the possibilities. And some people seem to be doing just that. You can gain from their labors by reading articles, checking out online examples, and experimenting with tools that can do some of the CSS work for you.
Box Model Information
Interactive CSS Box Model: http://www.redmelon.net/tstme/box_model/. Fun, interactive tool for visualizing the box model.
On Having Layout: http://www.satzansatz.de/cssd/onhavinglayout.html. Not for the faint of heart, this highly technical analysis of Internet Explorer explains the main cause (and some solutions) for many of the CSS bugs that plague Windows Internet Explorer 6 and earlier.
CSS Grid Calculator: http://www.gwhite.us/downloads/css_grid_calc.html. A Flash application (now that's ironic) that asks for some basic properties of the layout you wantânumber of columns, gutter width, page width, and so onâand generates the CSS to make it happen.
Float Layouts
In search of the one true layout: http://www.positioniseverything.net/articles/onetruelayout/. Interestingâif slightly mind-bendingâpresentation on how to create a float-based layout that overcomes most of the limitations of floats.
Any Order Columns: http://bitesizestandards.com/bites/understanding-any-order-columns. A simple introduction to using negative margins for positioning columns regardless of their position in the HTML source code.
CSS Discuss Wiki page on float-based layouts: http://css-discuss.incutio.com/?page=FloatLayouts ...
Get CSS: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.