This is the same as the 2 Column Flexible but with the
addition of a header div for top navigation or banner.
The left column uses float left and has a percentage width
allowing both columns to 'flow' as the browser window changes
shape.
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:
Defined padding:0; for the body to fix a problem with
Opera.
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.
Right Column
The right column can be used for navigation
links, search box etc.
whatever line was changed. In that case, we need to make only one
small alteration to our styles, and we'll get the result shown
in Figure 9-22:
SPAN.change {position: absolute; top: static-position; left: -5em; width: 4em;
font-weight: bold;}
P {margin-left: 5em; position: relative;}
<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>
laoreet dolore magna aliquam erat volutpat.</P>
paragraph and line break tags right where they are and simply
SPAN the headings:
<SPAN CLASS="head">Heading</SPAN><BR>
WARNING
The danger in using SPAN instead of logical
elements like headings is that pre-CSS browsers won't recognize
the SPAN element. Also, indexing robots
won't be able to make any sense of SPAN as a
piece of document structure. On the other hand, using
In addition, if the document is scrolled, the paragraph will scroll
right along with it. This is because the element's containing
block is the BODY element's content area,
not the viewport. If you want to position elements so that
they're placed relative to the viewport and don't scroll
along with the rest of the document, then the next section is for
you.
Before we get there, however, there are a few more things to cover.
Figure 7-23. An inline element with a left margin
Note the extra space between the end of the word just before the
inline element, and the edge of the inline element's
background. This can end up on both ends of the inline if we wish:
B {margin: 10px; background: silver;}
As expected, Figure 7-24 shows a little extra space
on the right and left sides of the inline element, and no extra space
above or below it.
with a background color, but the background won't extend into
the padding unless you get very sneaky. You need to add a border, as
was discussed earlier in "Margins: Known Issues."
Therefore, if you have a background color, some padding, and a border
set for an element, you'll see the background fill the content
area and the padding as requested, but a transparent space will
incorrectly appear between the two, as shown in Figure 7-62.
Figure 7-62. Padding problems in Navigator 4
This may be an interesting effect, but it isn't permissible
faces with labels like Italic, Cursive,and Kursivare usually mapped to the italic keyword, whileoblique can be assigned faces with labels such asOblique, Slanted,and Incline.
whatever line was changed. In that case, we need to make only one
small alteration to our styles, and we'll get the result shown
in Figure 9-22:
