osCommerce

I've started integrating CSS layout 3 with the template system. I transfered the positioning definitions only. The fancy parts, such as background colors and borders, were only used to outline the various bits and pieces. We don't want LemonChiffon and GoldenRod colors in the default layout, we'll just keep it haze grey & underway.

The combined design constraints also require redefining the DIVs . Specifically, we add a sub-block containing both the center and left column. This is no problem, as the template system combines HTML and CSS.

The design comes in nicely, and is slightly different from MS2, as all columns are “liquid”; that is the left and right column will get wider if you enlarge your browser. They were fixed at 125px in MS2.

Commited to my branch 30 minutes ago.

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!

The second CSS layout is online. The first one is still here.

The first layout was a liquid design (the center column uses all available width). The second one is centered with a fixed width, compatible with a 800×600 display.

Note: the main constraint is to have the interesting contents of the page first in the HTML. Like this:

Inspiration for this layout came from one of the suggestions of devosc (Gregory Baboolal). Thanks Gregory!

As in the first layout, the header is absolutely positioned. This is easy to do as we have a very good idea of what goes into the header. The rest of the page goes into a container DIV, a frequent trick for CSS positioning. There is no complex imbrication of DIVs there, we just list them, "pageContent" being the first one.

The tricks are in the CSS. I will provide a detailed analysis when the final layout is chosen. Right now I'll only point out the use of both position and float for the column DIVs, and the negative margin for the left column.

Fell free to download the HTML and CSS — If you want to submit a CSS that uses the current markup, mail it to me; if you require a different markup, mail both HTML and CSS, I will upload them and report here. Please don't post entire files in the comments, as it makes very hard reading.

One last thing. The layout should display correctly in Firefox, Opera and IE 6. I did not adjust it for IE 5 yet, an easy but tedious chore.