3 tabellen naast elkaar
nu wilde ik door middel van style="float: ;" alle drie naast elkaar zetten maar dit lukt niet.
Met 2 tabellen lukt het wel (left en center of left en right) maar met 3 (left, center en right) lukt het niet.
Is dit niet mogelijk?
<html>
<table cellpadding="3" cellspacing="10" border="0" style="float: center;">
</html>
in die tabel staat er nu center bij float en bij de andere zet ik dan left en right
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div style="width:600px;">
<div style="float:left;width:200px;">Links</div>
<div style="float:left;width:200px;">Midden</div>
<div style="float:left;width:200px;">Rechts</div>
<br style="clear:left;" />
</div>
<div style="float:left;width:200px;">Links</div>
<div style="float:left;width:200px;">Midden</div>
<div style="float:left;width:200px;">Rechts</div>
<br style="clear:left;" />
</div>
Let wel, het is beter om al je css in een apart bestand te zetten in plaats van (inline) tussen de html!
Code (php)
1
2
3
4
2
3
4
.linkerkolom {
float: left;
width: 200px;
}
float: left;
width: 200px;
}
Daarna gebruik je de in CSS gedefinieerde klasse linkerkolom in (X)HTML met:
Code (php)
1
<div class="linkerkolom">...</div>
Aangezien de drie div's hier alledrie dezelfde CSS-instellingen gebruiken, kun je ook één algemene klasse definiëren en die drie keer toepassen:
Code (php)
1
2
3
4
2
3
4
.zwevendeKolom {
float: left;
width: 200px;
}
float: left;
width: 200px;
}
En daarna in HTML:
Code (php)
1
2
3
2
3
<div class="zwevendeKolom">Links</div>
<div class="zwevendeKolom">Midden</div>
<div class="zwevendeKolom">Rechts</div>
<div class="zwevendeKolom">Midden</div>
<div class="zwevendeKolom">Rechts</div>
Gewijzigd op 12/10/2012 08:47:45 door Ward van der Put
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
div#drieKolommen{
width: 600px;
}
div#drieKolommen div{
float: left;
width: 200px;
}
width: 600px;
}
div#drieKolommen div{
float: left;
width: 200px;
}
Nu geldt de definitie div#drieKolommen div voor elke geneste div in de hoofdcontainer #drieKolommen en gebruik je in HTML:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="drieKolommen">
<div>Links</div>
<div>Midden</div>
<div>Rechts</div>
<br style="clear:left" />
</div>
<div>Links</div>
<div>Midden</div>
<div>Rechts</div>
<br style="clear:left" />
</div>
Toevoeging op 12/10/2012 11:59:07:
Ok, ik heb dat allemaal gedaan en met chrome werkt dit prefect maar niet met allemaal. Is er mss nog een aanpassing mogelijk of een andere manier?
Toevoeging op 12/10/2012 19:18:59:
ah, dit is inorde. Heb het probleem gevonden