CSS Layouts:

This set of columns illustrates how easy it is to do any layout in CSS. Have I missed one? Let me know and I'll add it here. Each row has a parent class of "layout-[Associated Letter]" and a set of columns within it with a class of "col" and a class of either "first" or "last" depending on which column it is in the markup. The naming is generic so future changes to the css will still make sense in the markup. This one CSS handles all of these layouts.

This has been tested in: Windows Firefox 5.1, 2.0, 3.0, IE 7, 6, 5.5, 5.01, Netscape 8.1, 7.1, Opera 9.10, Safari 3.2

If you can verify that this CSS works in browsers that are not listed here please let me know and I'll add it to this list.

A-PRIMARY: 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.

B-PRIMARY: 1/2

B-SECONDARY: 1/2

C-PRIMARY: 1/3

C-SECONDARY: 1/3

C-TERTIARY: 1/3

D-PRIMARY: 1/4

D-SECONDARY: 1/4

D-TERTIARY: 1/4

D-QUATERNARY: 1/4

E-PRIMARY: 2/3

E-SECONDARY: 1/3

F-PRIMARY: 1/3

F-SECONDARY: 2/3

G-PRIMARY: 1/2

G-SECONDARY: 1/4

G-TERTIARY: 1/4

H-PRIMARY: 1/4

H-SECONDARY: 1/4

H-TERTIARY: 1/2

I-PRIMARY: 3/4

I-SECONDARY: 1/4

J-PRIMARY: 1/4

J-SECONDARY: 3/4

K-PRIMARY: 1/4

K-SECONDARY: 1/2

K-TERTIARY: 1/4

Golden Ratio: 62% = 1 1/2 larger then its smaller sibling.

Golden Ratio: 38%

NESTING

The below samples are nested layouts using the same markup from above. These samples were put together just to see if it is possible to create more complex layouts and not ment to be production code.

The one caveat is that the nested layouts must carry more weight in the CSS in order to hold their proper widths without inheriting from the containing layouts CSS properties. So in the case below both layout A and B needed to have a stronger weight in the selector so they didn't inherit from Layout I. For the flexibility I think its a reasonable price to pay. Just be sure to pick your layouts first then change the CSS to handle the nesting.

Are you sure you need this layout? If you are nesting layouts maybe there is a better solution to your problem... I personaly would not want all of the bloat of additional markup.

B-PRIMARY: 1/2 in I-PRIMARY: 3/4

B-SECONDARY: 1/2 in I-PRIMARY: 3/4

A-PRIMARY: 1 in I-PRIMARY: 3/4

K-PRIMARY: 1/4 in I-PRIMARY: 3/4

K-SECONDARY: 1/2 in I-PRIMARY: 3/4

K-TERTIARY: 1/4 in I-PRIMARY: 3/4

I SECONDARY: 1/4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec volutpat felis sed dui. Nulla ac arcu ut libero convallis pharetra. Sed pulvinar auctor tortor. Duis et magna at quam dignissim varius. Nulla vehicula pede ac urna. Sed convallis. Donec urna lectus, ullamcorper non, posuere ut, euismod ut, libero. Nulla nibh. Sed condimentum consectetuer diam. Duis neque enim, eleifend et, condimentum eget, faucibus ac, arcu. Vivamus diam ligula, sagittis in, porttitor nec, rutrum ac, metus. Proin neque. Sed risus ipsum, feugiat et, porttitor sollicitudin, laoreet eget, odio. Vivamus faucibus velit et lectus. Nulla eleifend, augue commodo rutrum elementum, neque mauris congue nunc, vitae nonummy dui nunc non sem.

Cras massa urna, malesuada sed, eleifend vitae, sodales quis, leo. Sed adipiscing felis at risus. Vestibulum eu enim. Quisque rhoncus semper ligula. Morbi ac nisl vel tortor lobortis congue. Proin in sapien. Pellentesque leo arcu, facilisis vitae, blandit vel, tempus ut, orci. Pellentesque ornare vulputate nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra libero. Nam et dolor. Vivamus congue fermentum justo. Sed nibh lorem, vestibulum sed, dapibus a, cursus a, justo. Curabitur egestas augue eget odio.