CSS play - SIMPLE Flexible Layout
Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration.
Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration.
Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.
Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.
Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.
You can have any number of columns as long as the total width is 100%;
This top bar can be any combined width of the lower columns and can span any number of columns.
All this is done with simple divs.
Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus. Sed condimentum iaculis massa. In leo nisl, porttitor at, fermentum a, vulputate nec, dui. Praesent quis nisi eget felis tincidunt tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla augue. Duis in ipsum at ante egestas accumsan.
This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.
All the colors are background color, so there is no need for background images to give the impression of full height columns.
This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.
All the colors are background color, so there is no need for background images to give the impression of full height columns.
All five columns will end at the footer.
This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.
All the colors are background color, so there is no need for background images to give the impression of full height columns.
All five columns will end at the footer.
IE6 does require a couple of hacks to overcome its lack of min/max width and its rounding errors when using percentage values.