Wednesday 10th of March 2010 11:47:02 AM
 30 Dec 02

Two Column Fixed Width with Header & Footer

Ver 2.3

This template is actually a replica of one of my other websites which uses tables for the very same layout. I wanted to see could it be done and it seems to work perfect.

This is basically set up as follows: there is a main outer div which centers the page and is a fixed width. There are 4 main div's within this outer div; header (#hdr), bar (#bar), body (#body) and footer (#ftr). The body div holds 2 more divs, the left div which is for navigation and the right div which is for our content.

One drawback we see immediatly is getting equal heights for the left navigation div and right content div. The work around I use for this is: whichever is likely to be the shortest (in height) div, probably the left navigation div, set the background of the #body div the same as this, also the border separating the two divs - that should be on the right content div.

Another problem discovered recently was that when you use the float property it can cause the floated divs to "jump out" of their container block. The workaround I found for this was simply to specify a height for the container div.

This template has been tested in:

  • Mozilla 1.5b & Firefox 0.8
  • Internet Explorer 6
  • Netscape 7.1
  • Opera 7.11

Changes in this version:

  1. removed box hack
  2. added margin:auto; to #outer div for centering.
  3. big problem in moz/ns was the bodyblock div,with both the left col and content col floated they were "lifted" out of the bodyblock with then collapsed. IE and Opera were ok. removed float left from content div, added align="right" to the html of the bodyblock and then text-align:left; to the content div to bring the content back. it's ugly but works. using text-align:right; instead of align="right" will not work in moz/ns

Filler Content

Dáig alta in mac sin i tig a athar & a mathar icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab rígi in rí, .i. mar atraig fóchetóir césta & cangni in choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian de fóchetóir ic fegad na maccaem ic imbirt chless cluchi & immanae, in trian tanaise dond ló ic imbirt brandub & fidchell, & in trian dedenach ic tochathim bíd & lenna, con-dageib cotlud for cách, aes cíuil & airfitid dia thalgud fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar Fergus, na fuil in hErind no i n-Albain óclach macsamla Conchobair.

Ocus adfeta don mac sin scéla na maceáem & na maccraide i n-Emain, & radis in mac bec ria mathair ar co n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett no choimthecht ecin do chaimthechtaib Conchobair, do chor th' aesma & t'imdegla for in maccraid. Cían lim-sa di sodain a mathair, ar in mac bec, & ni biu-sa oca idnaide acht tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a mathair, airm in-das-fil. Sliab Fúait etrut & Emain. Dobér-sa ardmes furri amne, ar esium.


Copyright (c) You 2003

Note that the "first" line box is tall enough to contain the image, whereas the "second" is tall enough to contain the image, its padding, and its border. This is because the totality of the replaced element (content, padding, borders) make up the inline box for the replaced element. This is what forces the line boxes to be taller in Figure 8-66.

Margins are also contained within the line box, but they have their own wrinkle. Setting a positive margin is no mystery: it will simply make the line box taller, as in Figure 8-67. it even gets to the border.

The default value of padding is 0 (zero), and padding values cannot be negative.

WARNING

Opera 3.5 allows negative padding values, but this was fixed in Opera 3.6. The other browsers don't allow negative padding lengths. the wording in the specification). In its invisible state, the element still affects the document's layout as though it were visible. In other words, the element is still there: you just can't see it. Note the difference between this and display: none. In the latter case, the element is not displayed and is removed from the document altogether so that it doesn't have any effect on document layout. Figure 9-14 shows a document in which an EM element has been set to be hidden, based on the following styles and markup: