One of the arguments for switching from the table-based layout into CSS-based layouts is the flexibility CSS gives us. However, despite the flexibility, you have maybe experienced that the CSS layout you normally use didn’t handle a specific case so you still had to edit, or perhaps totally restructure your HTML?
In this article, you are presented with ten different layouts with example pages, all based on the same HTML. The most popular layout is a two-column CSS layout – top and right menu.
This layout fits educational and news-related websites such as educatetheusa.com. On the other hand, a three-column CSS layout is popular between the webshops.
This article and the example pages are perhaps not the universal answer so the title is maybe a little bit overstated, but hopefully, they can make it easier for someone.
Furthermore, all the pages are also experiments in how to change a layout without having to use absolute positioning since this takes the element out of the page flow. The changes in layout are made by changing mainly floating, margin and padding – no absolute positioning is used.