The third CSS layout is online. You can find the previous ones here and here. This will be the final mockup. The next layout is for real!
This layout is liquid, as the first. But this time, the left and right columns are fluid as well (their width was fixed in layout 1). The most obvious difference is the footer, which is now at the bottom of the page (it was at the bottom of the center column in layout 1).
The header is absolutely positioned, as usual. The rest of the page goes into a container DIV. But this time, we're using a trick in the HTML markup itself. as the "pageContent" DIV is still coming first in the page: an additional container encloses the left column and center column both.
The way the DIVs are floated left and right might seem strange, but it's actually simple:
- The right column is floated right.
- The additional container holding the left and center columns is floated left;
- Inside this container, the left column is floated left, and the center column is floated right (so it ends up in the middle).
That's it! CSS is easy!
