[HTML] CSS geen wrapping naar volgende regel

[Verwijderd]

Ik probeer een design te maken wat voor de content dynamisch meestrechted. Dus ik kan niet met een vaste breedte werken.

De code die ik ongeveer voor ogen had is als volgt:

HTML:

<div style='width: 100%; height: 100%;' id='container'>
    <div style='width: 100%; height: 120px; text-align: center' id='top_logo'>
        <h2>[logo]</h2>
    </div>

    <div style='width: 100%; height: 120px; text-align: center' id='top_navigation'>
        <h2>[navigation buttons]</h2>
    </div>

    <div style='width: 100%;' id='center_container'>
        <div style='width: 250px; float: left;' id='left_navigation'><h2>[more buttons]</h2></div>
        <div style='float: left;' id='content'>
            [content]
        </div>
        <div style='width: 250px; float: right;' id='news'><h2>[news]</h2></div>
    </div>
</div>

Maar zodra er in de DIV content wat komt te staan neemt deze de volledige breedte in beslag van zijn parent.

Dan krijg je dus zo iets:



De bedoeling is dat news rechts uit blijft lijnen. Zodat content een variable breedte heeft. Is er een mogelijkheid om dit zonder tables te doen. Ik weet dat je een TD 100% width kan geven zonder dat dat dusdanige invloed op de rest van de TD's heeft dat deze verspringen.

Mijn vraag is dus: is er een manier om floatende DIV's niet naar een volgende regel te laten wrappen? En dan dus niet clear: right want dan valt hij buiten de container

[Justice]

overflow:auto op de parent, zie http://annevankesteren.nl/2005/03/clearing-floats

[ Voor 51% gewijzigd door Justice op 06-03-2007 15:54 ]

[Verwijderd]

Justice schreef op dinsdag 06 maart 2007 @ 15:54:
overflow:auto op de parent, zie http://annevankesteren.nl/2005/03/clearing-floats

Ik wil uberhaupt niet dat hij naar de volgende regel wrapt. Heeft verder niks met de overflow eigenschappen van de parent te maken.

[BasieP]

Verwijderd schreef op dinsdag 06 maart 2007 @ 16:05:
[...]


Ik wil uberhaupt niet dat hij naar de volgende regel wrapt. Heeft verder niks met de overflow eigenschappen van de parent te maken.

niet wrappen betekent doorgaan op huidige regel. doorgaan op huidige regel wil wel eens veroorzaken dat dingen van je container af vallen. en dat heet nou 'overflow'

kortom: wel boeiend dus

[TeeDee]

En als je eens gaat spelen met de margin (laten we zeggen van 250px) op je #content ?

[Verwijderd]

BasieP schreef op dinsdag 06 maart 2007 @ 16:25:
[...]

niet wrappen betekent doorgaan op huidige regel. doorgaan op huidige regel wil wel eens veroorzaken dat dingen van je container af vallen. en dat heet nou 'overflow'

kortom: wel boeiend dus

Het punt is dat de breedte van de content layer dynamisch moet zijn. Niet meer niet minder.. Daar doet volgens mij de overflow property van de parent niets aan af

[Verwijderd]

TeeDee schreef op dinsdag 06 maart 2007 @ 16:27:
En als je eens gaat spelen met de margin (laten we zeggen van 250px) op je #content ?

Dat lijkt er al iets meer op.. er blijft dan mooi de ruimte over die nodig is. Maar de volgende div wordt toch een regel lager gezet

[TeeDee]

Misschien heeft IE7 ook nog last van de double margin bug. Misschien moet je wel meer of minder margin erop zetten. (je borders etc. etc. worden ook bij je verschillende div's opgeteld)

Beter nog: Hetgeen wat je wil, is een 3 column css layout. Daar is al heel veel over te vinden via Google.

[Phoenix27]

Verwijderd schreef op dinsdag 06 maart 2007 @ 17:01:
Dat lijkt er al iets meer op.. er blijft dan mooi de ruimte over die nodig is. Maar de volgende div wordt toch een regel lager gezet

En als je news-div nu eens voor je left navigation-div zet? Dat zou die extra witregel moeten wegpoetsen...

[Verwijderd]

Phoenix27 schreef op dinsdag 06 maart 2007 @ 17:09:
[...]


En als je news-div nu eens voor je left navigation-div zet? Dat zou die extra witregel moeten wegpoetsen...

Heej... briljant Nu lijnt het geheel wel goed uit. Hier kom ik zeker verder mee! Bedankt allemaal.