Detta är en div Div01_oformatterad som dock har en grå ram. Bilden är 700 px bred och justerad centrerat.
Detta är HTML5-sidan test_01.html (<doctype html>) som samarbetar med css-filen test-css.css
Blå kursiv Courier New erhålls med en lokal style
Brun Times New Roman 12pt som huvudtypsnitt och fetstil regleras också i lokal style
Detta är en div Div01_oformatterad som dock har en grå ram. Bilden är 700 px bred och justerad centrerat.
Det här är en div Div_500_center där bilden är för stor eftersom den inte har åsatts width="100%"
Ännu en Div_500_center och samma bild som ovan men här med width="100%". OBS glöm inte hight="auto"
Denna .Div_100-procent_center har max-width 600 px medan bilden har width 100%. Både div och bild förminskas när visningsfönstret blir för litet.
Nu blir det spännande. Vi ska lägga flera div bredvid varandra och så småningom i rader och kolumner. Detta textstycke är centrerat med en bredd av 350 px.
Detta är en Div_1000_center med Verdana 12pt som standardtext och 5 px padding.
(Padding är "inre marginal". Margin är yttre marginal, auto centrerar)
Här nedan placeras nu fyra div sida vid sida med hjälp av float
Detta är också en Div_1000_center.
Denna div har max-div 1000 för att dra ihop sej vid mindre utrymme. De inbäddade minidivarna omgrupperar sej då automatiskt.
Här nedan placeras nu tre rader med fyra div i varje med hjälp av float left. Första div i varje rad har clear left för att inte tabellstrukturen ska krascha.
Det här är fristående text utanför div och hamnar således under sidans övriga innehåll.
Under pågående redigering i Dreamweaver CS6 ser det helt galet ut men i browser blir det helt OK.
Även detta textblock är centrerat med 300 px bredd medelst CSS