FLEX allows you to work with 6 core blocks of varying percentage width.  You can choose any gutter size and blocks can be nested.

Play with gutter size:   

1-1

1-2

1-2

1-3

1-3

1-3

1-3

2-3

1-4

1-4

1-4

1-4

1-4

3-4

1-5

1-5

1-5

1-5

1-5

1-5

4-5

1-5

1-5

3-5

1-5

1-5

1-5

2-5

1-6

1-6

1-6

1-6

1-6

1-6

1-6

5-6

Example code 1.

<div class="section"> <div class="span_1-1">Header</div> <div class="span_1-4">Left Column</div> <div class="span_1-2">Main Content</div> <div class="span_1-4">Right Column</div> <div class="span_1-1">Footer</div> </div>

Example code 2.

<div id="abc" class="section"> <div class="span_1-4">Left Column</div> <div class="span_3-4 span_parent"> <div class="span_1-1">Header</div> <div class="span_2-3">Main Content</div> <div class="span_1-3">Right Column</div> </div> </div> <div id="xyz" class="section"> <div class="span_1-1">Footer</div> </div>

Example layout with nested blocks.

HEADER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida diam et, laoreet tempor sapien.

A

B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida diam et, laoreet tempor sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida diam et, laoreet tempor sapien. Sed convallis aliquam urna, at pellentesque nulla lacinia ac. Etiam nisl augue, egestas a massa a, blandit convallis lectus. n et lacus luctus viverra. Cras a imperdiet diam. Duis urna augue, posuere sed justo non, sollicitudin interdum est. Curabitur in dignissim nulla, at feugiat enim. Donec enim nisl, scelerisque vitae elit et, ultricies dictum purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida diam et, laoreet tempor sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida diam et, laoreet tempor sapien.

Lorem ipsum dolor sit amet.

C

D

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Etiam tincidunt eros orci, ut faucibus massa posuere et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida diam et, laoreet tempor sapien. Sed convallis aliquam urna, at pellentesque nulla lacinia ac. Etiam nisl augue, egestas a massa a, blandit convallis lectus. n et lacus luctus viverra. Cras a imperdiet diam. Duis urna augue, posuere sed justo non, sollicitudin interdum est. Curabitur in dignissim nulla, at feugiat enim. Donec enim nisl, scelerisque vitae elit et, ultricies dictum purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget urna quis odio vulputate tempus. Quisque odio nisl, faucibus gravida.

FOOTER