Willen we 2 of meer kolommen gebruiken op een pagina dan kan dat niet zomaar. We moeten hiervoor een trucje toepassen.
Willen we een indeling zoals mijn homepage, dan moeten we de kolommen in een div plaatsen die de kolommen dan gaat bevatten. Het voordeel van deze methode is dat als men ook een voetbalk wilt hebben deze dan probleemloos onder de langste kolom komt en over de gehele breedte van de pagina.
De container krijgt de id wrapper. Deze maken we met de div tags.
<div id="wrapper">
</div>
In de stylesheet plaatsen we de volgend code:
#wrapper {
width:1253px;
margin:0 auto;
padding: 0;
background-color:#fff;
height: 1%;
overflow: hidden}
De height: 1% is een bug-fix die er voor zorgt dat als de wrapper een eigen achtergrondkleur heeft deze ook wordt weergegeven. Hiertoe behoort ook overflow: hidden.
In de wrapper kunnen we nu net zoveel kolommen plaatsen als we willen.
In de wrapper gaan we de kolommen plaatsen. U kunt zelf het aantal bepalen, maar zal meestal tussen 2 en 4 liggen. In ons voorbeeld doen we er drie.
<div id="wrapper>
<div id="kolom1">
</div><!--einde kolom1 -->
<div id="kolom2">
</div><!--einde kolom2 -->
<div id="kolom3">
</div><!--einde kolom3 -->
</div><!--einde wrapper -->
We hebben nu drie kolommen gecreëerd en dienen deze in de stylesheet te beschrijven.
#kolom1 {}
#kolom2 {}
#kolom3 {}
Indien we verder hier niets mee doen zullen de kolommen onder elkaar worden weergegeven i.p.v. naast elkaar. Dit geld ook voor afbeeldingen en teksten. Willen we teksten om afbeeldingen laten lopen dienen we float te gebruiken. Hierdoor wordt het mogelijk om een tekst om een afbeelding te plaatsen. Ook kunnen we er kolommen mee maken.
Geven we kolom1 float:left mee dan zal kolom2 naast kolom1 komen te staan met kolom3 onder kolom2.
Om ook kolom3 naast kolom2 te krijgen geven we ook kolom2 float:left mee. We hebben nu drie kolommen gecreëerd.
Willen we een tekstomloop bij een afbeelding dan gebruiken we ook float. Dit gebeurd op vrijwel de zelfde wijze.
We plaatsen eerst de afbeelding tussen alinea tags en geven die de class float. Hierna plaatsen we de tekst in de volgende alinea.
We krijgen dan:
<p class="left"><img src=".....></p>
<p>Deze tekskt komt naast de foto.</p>
De teksten blijven naast de afbeelding geplaatst worden zolang de hoogte van de afbeelding groter is dan die van de naast liggende tekst.
Om een float af te breken gebruiken we clear. Het resultaat is dat hierna weer de volle beschikbare breedte gebruikt kan worden. Bij een tekstomloop gaat de tekst dan onder de afbeelding verder.
De mogelijkheden zijn: clear:both, clear:left en clear:right.
Door creatief met float en clear te werk te gaan kun je afbeeldingen en tekst speels verwerken.
Bij het bepalen van de breedtes van de kolommen dient rekening met marge, border en padding gehouden te worden, zowel links en rechts van de kolommen en van de wrapper. Het totaal mag niet meer zijn dan de breedte van de wrapper min de padding.
Hieronder de CSS-code voor de homepage van mij.
#wrapper {
width:1253px;
margin:0 auto;
padding: 0;
background-color:#fff;
height: 1%;
overflow: hidden}
#kolom1 {
float:left;
width:185px;
padding:0 5px 5px 10px;
background-color:#fff}
#kolom2 {
float:left;
width:836px;
padding:0px 5px 5px 5px;
border-left:1px solid #00f;
border-right:1px solid #00f;
background-color:#fff}
#kolom3 {
float:right;
width:200px;
padding:0 0 5px 5px;
background-color:#fff}
Voor de zekerheid kun je het beste een achtergrondkleur aan de kolom meegeven. Het is niet noodzakelijk omdat de achtergrondkleur wordt geërfd.
De voet van de pagina komt onder de wrapper. Om er zorg voor te dragen dat het onder de kolommen komt krijgt deze clear:both mee.