Wednesday 10th of March 2010 11:47:10 AM

CSS Page Layout Templates

3 Column Templates

The following templates are all three column templates.

The 'box hack' has been removed from the templates in the last round of changes which means the 'pixel-perfect' templates are not 'pixel-perfect' in IE5xPC. Future versions may include the box-hack again.



Templates: Two column |  Three column |  General




Three Column, Left & Right Columns Static

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: This is much the same as 'Two Col Left Col Static' but now with the addition of a right hand column which is absolutely positioned.
Actions: View | Image Preview | Download [ 6k] [ZIP]



Three Column 'Pixel-Perfect'

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(6)
Description: Sometimes this is called the "Holy Grail". It's a three column template which fits together "pixel perfect".



Three Column 'Pixel-Perfect' with Header

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(6)
Description: The same as the "Holy Grail" above but with a header div. Also expands to fit the whole screen.
Actions: View | Image Preview | Download [ 3k] [ZIP]



Three Column Pixel-Perfect with Header & Footer Recommended !

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: My most complete template. It has three columns, a header and footer and will resize with the browser window.
Actions: View | Image Preview | Download [ 6k] [ZIP]



Templates: Two column |  Three column |  General



Note: The poor colour schemes and thick borders of the templates are for demonstration purposes. :-)



8.4.2.2. Adding box properties

As we're aware from previous discussions, padding, margins, and borders may all be applied to inline nonreplaced elements, and they don't influence the line-height at all. If we were to apply some borders to a SPAN element without any margins or padding, we'd get results such as that shown in Figure 8-57.

<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE="font-size: 24px;">boldfaced</B>and <SPAN STYLE="vertical-align: top;">tall</SPAN> and which is<BR>larger than the surrounding text.</P>

Now we're back to our earlier example, where the middle linebox is taller than the other line boxes. However, notice how the"tall" text is aligned in Figure 8-54.