Weboldalunk tartalmát szeretnénk két oszlopra bontani, ahogy az alábbi kép mutatja:
Másoljuk le a "main1.css" fájl ugyanoda "main2.css" néven, mert ezt fogjuk továbbfejleszteni. Szúrjuk be a "section" stílusbeállításai fölé a baloldali oszlop (a HTML tag majd "aside" lesz) stílusait! Itt az új jellemző a float:left;, aminek hatására az "aside" oszlop balra "úszik", s látszik, hogy a módosítandó jobboldali "section" oszlop is ugyanezzel bővült. Egészítsük ki, ezenkívül a szélességét is vegyük vissza 680 pixelre!
/* Bal oldal stílusai középen*/
aside {
width:220px; float:left; margin-top:15px; padding-left:20px;
}
/* Jobb oldal (tartalom) stílusai */
section {
width:680px; float:left; padding:0px 20px 0px 20px;
}
Másoljuk le az "index1.php" fájlt is "index2.php" néven, majd tegyük a "section" fölé a baloldali oszlopot! Így:
<aside>
Ide írjunk valami szöveget
</aside>
Ne felejtsük el kijavítani a <link rel='stylesheet' href='css/main1.css'> sort <link rel='stylesheet' href='css/main2.css'> -re!
Ha megnézzük az oldalt, már sejthető a két oszlop, de felfelé csúsztak, és látszólag eltűnt a lábrész is. Most - egyenlőre magyarázat nélkül - szúrjunk be még egy sort a weboldalunkba a <footer> fölé!
<div style='clear:both;'></div>
<?php
include('incl/p2.inc');
?>
Ez tegyük az "Ide írjunk valami szöveget" helyébe, ahogy a szélesebb oszlopba is egy beszúrt szöveget "includoltunk"! S hogy ez működjön is, hozzuk létre a "p5.inc" fájl mellé a "p2.inc" fájlt az előbbi 1-2 bekezdéséből!
Ellenőrzésképpen ide teszem a módosított "index2.php" tartalmi részét egy kis kiegészítéssel.
