Layout Gala

Layout Gala

It’s almost minimal, apart from an extra wrapper around the content. Some might argue that the extra div it’s unsemantical: all I can say is that in my opinion an extra wrapper in the markup is certainly better than CSS hacking, and to be able to meet the objectives I fixed for the article I needed at least a solid starting point.Talking about CSS: each of the layouts uses float and in most of the cases negative margins. Once you’ve understand how they work, they are really simple and powerful. There are two main things to know: first, a negative margin according to the side of float has the effect of shifting even more the floated elements towards the side of float; the second one is that a negative margin on the opposite side of float does not affect the floated element position, but has the only effect to yeld space for eventual flanking element on the side of the negative margin.

The CSS of the examples, which is embedded in both online and download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout. In fact, the CSS has been divided, with an empty line, between two logical parts: the first is for typography and colors, while the second and most important is for the layout itself. No graphics was used in the examples, but if you’ll feel the need, you may want to apply techniques such as Faux Columns and Sliding Faux Columns. That’s all for now: enjoy!