[CSS] Div centreren op 100% breedte?

[Rexomnium]

Ik ben uitstekend in staat om een div layer in het midden van de pagina te zetten. Nu ik een keer een website wil bouwen die uitgesmeerd is over het gehele scherm, kom ik in de problemen.
Ik wil graag een div centreren die aan de linker- en rechterkant een marge heeft van een x aantal pixels. De marges zijn dus altijd gelijk, maar de breedte van de div verschilt per resolutie.

Ik heb nu de volgende CSS-code:

Cascading Stylesheet:

BODY
    {
        background: #EEEEEE url('../img/body-background.png');
        margin: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
#placeholder
    {
        background: #FFFFFF;
        border: 1px solid black;
        margin: 30px 15px 30px 15px;
        padding: 20px 15px 20px 15px;
    }
    
#navbar
    {
        background: #EEEEEE url('../img/background-navbar.png') repeat-x;
        border: 1px solid #999999;
    }
    
#subnavbar
    {
        width: 200px;
        margin-right: 20px;
    }

Ik heb dus een holdercontainer die uitgesmeerd is over het gehele scherm, een navigatiebalk die iets minder lang is en aan de bovenkant in die container staat. Daaronder een subnavbar die aan de rechterkant komt.
Dit bovenstaande werkt prima. Ik krijg keurig netjes hetgeen wat ik wil. Ik krijg dan echter niet voor elkaar om een volgende div layer naast de subnavbar te zetten.
Zodra ik de subnavbar op float: left; zet, rekt de #placeholder niet meer mee en dat is wel de bedoeling.

Overflow: auto; in #placeholder zetten was mijn oplossing, maar uiteraard vindt IE 6 dat weer niet zo'n sterk plan. Kan iemand mij een subtiel schopje in de goede richting geven?

[Kiphaas7]

Moet je even kijken naar de laatste 4 replies in dit topic:

\[CSS/divs] procentuele widths en float left gaan niet samen

Waarschijnlijk is die placeholder niet nodig; je kan perfect de margins meegeven aan je body.

Zodra je float:left meegeeft moet je ook width:100% meegeven om het uit te smeren over de hele breedte. Zoals ook in bovenstaand topic staat.

[ Voor 45% gewijzigd door Kiphaas7 op 27-01-2007 20:53 ]

[Rexomnium]

Kiphaas7 schreef op zaterdag 27 januari 2007 @ 20:49:
Waarschijnlijk is die placeholder niet nodig; je kan perfect de margins meegeven aan je body.

Zodra je float:left meegeeft moet je ook width:100% meegeven om het uit te smeren over de hele breedte. Zoals ook in bovenstaand topic staat.

Die placeholder is mijns inziens wél nodig, aangezien ik een wit vlak wil hebben met een zwarte border.

Width: 100% had ik ook al bedacht, maar dan krijg ik horizontale scrollbars.

Edit:
Okay, thanks je hebt me op de goede weg geholpen. Ik heb het opgelost met het volgende stukje code

Cascading Stylesheet:

BODY
    {
        background: #EEEEEE url('../img/body-background.png');
        margin: 30px 15px 30px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
#placeholder
    {
        background: #FFFFFF;
        border: 1px solid black;
        /*margin: 30px 15px 30px 15px;
        padding: 20px 15px 20px 15px;*/
        overflow: auto;
        float: left;
        width: 100%;
    }
    
#navbar
    {
        background: #EEEEEE url('../img/background-navbar.png') repeat-x;
        border: 1px solid #999999;
        margin: 10px;
    }
    
#subnavbar
    {
        width: 200px;
        margin-right: 20px;
        float: left;
    }

Nogmaals bedankt.

[ Voor 40% gewijzigd door Rexomnium op 27-01-2007 23:02 ]

[Kiphaas7]

Rexomnium schreef op zaterdag 27 januari 2007 @ 22:58:
[...]


Die placeholder is mijns inziens wél nodig, aangezien ik een wit vlak wil hebben met een zwarte border.

Aha, ik dacht dat je dat alleen voor het voorbeeld wilde, my bad.

[Rexomnium]

Ik zit nu al een paar uurtjes te rommelen, maar het lijkt erop alsof ik met de ene oplossing tig problemen creër.
Ik wil graag de volgende layout maken:


De CSS + HTML staat hier (html) en hier (css).

Zoals je kunt zien, gaat er iets niet helemaal goed. In IE komt het content vlak redelijk goed uit; hij wordt uitgevuld over de gehele resterende breedte. Daarentegen komt de footer nu op een rare plaats te staan.
In Firefox wordt de content box helemaal niet goed uitgevuld en neemt hij de breedte aan van de inhoud. Wordt de inhoud meer dan het holdervlak, dan komt die box onder het submenu te staan.
Kan iemand mij wederom een behoorlijke schop in de goede richting geven? Ik wil de layout zoals het plaatje maken, maar ik blijf tegen een muur van onkunde van mezelf aanlopen

[ Voor 4% gewijzigd door Rexomnium op 29-01-2007 12:26 ]

[Kiphaas7]

Ik zou nogmaals eens kijken naar de link die ik hierboven heb gegeven, daar staat het meeste toch al in.

Anders even googlen want dit is best wel een standaard layout die je wilt, er zijn genoeg voorbeelden van dit te vinden.

[ Voor 36% gewijzigd door Kiphaas7 op 29-01-2007 15:08 ]

[Rexomnium]

Ik heb mijn best gedaan om de voorbeelden te gebruiken die jij aandraagt, maar ik ben er nog niet uitgekomen. Ik krijg het althans niet voor elkaar om de gewenste layout te maken met die holdercontainer er omheen. Zonder die container lukt het trouwens ook niet helemaal, want de oplossing die ik op deze pagina vond heeft nog een derde column nodig.

[moozzuzz]

Probeer es te googlen op layoutgala.