7.6.1. Floated Elements
There are a few things to keep in mind with regard to floatingelements. In the first place, a floated element is in some respectsremoved from the normal flow of the document, although it stillaffects the layout. In a manner utterly unique to CSS, floatedelements exist almost on their own plane, yet they still have majorinfluence over the rest of the document.
Of course, when an element is floated, other content "flows
Wednesday 08th of February 2012 12:20:25 AMTwo Column Flexible
This is a very easy page layout which you have probably seen on sites such as ALA (A List Apart). Each column is created with simply two div tags.
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 zero padding for the body to fix a problem in 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.
margins.
Figure 7-5. Paragraphs with, and without, margins
The simplest way to set a margin is by using the propertymargin.
Suppose wewish to set a quarter-inch margin on H1 elements,as illustrated in Figure 7-6. (A background colorhas been added in order to be able to see the edges of the content That's the sort of thing we want to avoid.
Let's explore this in a little more detail. Assume the following:
Since, in this circumstance, the author's styles will outweigh the reader's styles -- that's how it is under CSS1, anyway -- then the new style sheet for this document will be as follows (shown in Figure 6-21):