3 divs naast elkaar plaatsen

[Milenko]

Hi,

Ik zit al een tijdje met hetzelfde probleem te stoeien, maar ik kom er niet uit. Ik zou graag 3 divs naast elkaar willen plaatsen. Hieronder zal ik het even beschrijven.

Wat ik zou willen: (beetje rare volgorde, maar zo is het wel makkelijker te beschrijven)

• 3 divs
• div1 staat links van de pagina, is 200px breed, komt onder de header van 100px hoog en neemt alle ruimte in tot onder aan de pagina.
• div3 staat rechts van de pagina, en heeft verder dezelfde eisen als div1.
• div2 staat in het midden van de pagina, en heeft verder dezelfde eisen als div1 en div3.

Een voorbeeldje heb ik getekend in Paint.

http://imageshack.us/photo/my-images/41/helpmij.png/

Hopelijk kan iemand mij hiermee helpen

Groetjes Milenko

 

[edevlieger]

Kijk eens op:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

Je kunt hier nog 'frame' rechts neerzetten.

 

[Milenko]

Hiermee kan ik zeker bereiken wat ik wil

Maar volgens mij had ik gelezen dat frames niet meer gebruikt werden? Of haal ik nou 2 dingen door elkaar?

 

[edevlieger]

het zijn ook geen 'frames', vandaar mijn haakjes
trouwens dank voor de vraag want ik wil ook van mijn frames af.

 

[Milenko]

Aha oke. En geen probleem

Maar ik heb nog wel een probleem...
Ik zit wat dingen te proberen in die editor van W3C, maar hoe krijg ik die middelste div dan, qua breedte, netjes opgevuld?
Want ik kan wel een X aantal pixels invullen, maar dat komt niet goed bij verschillende resoluties...

 

[edevlieger]

Ik begrijp je probleem.
Volgens mij is het gewoon een kwestie van zoeken naar 100% en div.
Kijk ook eens b.v. naar:
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Mocht je echt niet uitkomen, zet de code erbij die je tot nu toe hebt gemaakt.

 

[Milenko]

Is goed. Bedankt voor al je hulp tot nu toe!

Ik zal morgen nog even wat dingen proberen. Mocht het dan nog niet lukken, dan post ik dat wel weer. Mocht het toevallig toch perongeluk lukken, dan post ik dat natuurlijk ook eventjes

 

[Milenko]

Ik heb het nu voor elkaar. Hoewel ik wel wat aanpassingen in mijn ontwerp moest doen. Zo heb ik de 200px (van de div links en de div rechts) aangepast aan 10% en de middelste div de breedte van 80% gegeven.

Voor de verticale opvullen heb ik een stukje javascript gebruikt, dat ik heel stiekem van internet heb afgeplukt Namelijk de volgende code:

[JS]<SCRIPT type="text/javascript">
document.getElementById('container').style.height=(window.innerHeight - 127)+"px";
</SCRIPT>[/JS]

Omdat de container nu alle ruimte onder de header inneemt (100% breed en 100% hoog - 127px op de hoogte, gezien de header + footer) heb ik div1, div2 en div3 de hoogte van 100% kunnen geven.

De breedte had ik bovenaan al vermeld. Dat was dus als volgt: div1 = 10% breed, div2 = 80% breed en div3 weer 10% breed.

Als het een beetje onduidelijk is, vermeldt dat dan even, dan probeer ik het duidelijker uit te leggen.

 

[Haaren101]

Kijk hier eens. Wordt prima stap voor stap uitgelegd hoe je je divs positioneert

Ron