[css] Tables naar divs

[Verwijderd]

Hallo allemaal,

in het kader van beter laat dan nooit ben ik bezig mn website in divs te maken ipv tables. Nu ben ik al 1000 problemen tegen gekomen en die waren allemaal wel redelijk te verhelpen. Maar het volgende, ik wil drie kolommen op mn site, ze zitten in een container div, dus een div links midden en rechts op zeg maar 1 regel.

voorbeeld:

code:

<style>
div.container   {
    border:1px solid #000;
    width:500px;
    height:500px;
    text-align:center;
}
.box1   {
    background-color:#00CCCC;
    padding:1em;
    float:right;
}
.box2   {
    background-color:#00CC99;
    padding:1em;
    float:left;
}
.box3   {
    background-color:#00FF00;
    padding:1em;
    width:200;
    clear:left;
}

</style>
<div class="container">
<div class="box1">
links
</div>
<div class="box3">
midden
</div>
<div class="box2">
rechts
</div>
</div>

Nu krijg ik dit niet eens in 1 browser voor elkaar, dus na googlen toch maar even vragen hier. iemand een idee?

Alvast bedankt

[Crayne]

Cascading Stylesheet:

div.container {
    border:1px solid #000;
    width: 500px;
    height: 500px;
    text-align: center;
}

.box1    {
    background-color:#00CCCC;
    padding:1em;
    float: left;
}

.box2    {
    background-color:#00CC99;
    padding:1em;
    float: right;
}

.box3    {
    background-color:#00FF00;
    padding:1em;
    width: 200px;
}

HTML:

<div class="container">
    <div class="box1">links</div>
    <div class="box2">rechts</div>
    <div class="box3">midden</div>
</div>

Of ik begrijp je verkeerd, of dit was te simpel voor woorden?

[TXC]

Ik denk dat je hier ook nog wel wat aan hebt: http://www.glish.com/css/7.asp

[Verwijderd]

Jah die link is met position:absolute, maar ik moet het binnen een div hebben en dan werkt position:abs niet.
daar zit em het probleem, en misschien is het wel verschrikkelijk simpel maar ik weet absoluut niet wat ik over het hoofd zie.

[tec]

position absolute werkt prima hoor binnen een andere div.. de positie wordt alleen bepaald aan de hand van de eerste parent met expliciet opgegeven positioning. dus als je de parent div position:relative geeft dan doetieutal.

[Verwijderd]

dan ist inderdaad erg makkelijk evengoed bedankt

[zimmy]

Hier zijn hele boeken over vol geschreven en het was, toen het net in was een erg 'hot topic'. Hier is nog een goede link van A list apart.

Pas maar op met dit CSS gedoe, 't is erg leuk om er mee te klooien en voor je het weet is de dag voorbij .

[XWB]

Niks te position absolute, gewoon floats gebruiken.

Cascading Stylesheet:

div#container 
{
    border: 1px solid black;
    width: 500px;
    text-align: center;
}

div#container div#left    
{
    background-color: red;
    float: left;
    width: 150px;
}

div#container div#middle    
{
    background-color: yellow;
    float: left;
    width: 150px;
}

div#container div#right    
{
    background-color: white;
}

HTML:

<div id="container">
    <div id="left">links</div>
    <div id="middle">midden</div>
    <div id="right">rechts</div>
</div>