[CSS] text-align: center; met meerdere floats

[r0bert]

Het blijft geklooi met die floats enzo.. Er zijn al een heleboel topics in de search te vinden, maar kan het antwoord op mijn vraag niet vinden..

mijn css:

Cascading Stylesheet:

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

div#elContainer
{
    width:      100%;
    height:     100%;
    
    text-align: center;
}

div#elHeader
{
    width:      700px;
    height:     150px;
    
    background-color: blue;
}

div#elHdrCool /* (1) */
{
    float:      left;
    
    width:      200px;
    height:     100%;
    
    background-color: yellow;
}

div#elHdrPack /* (2) */
{
    float:      left;
    
    width:      500px;
    height:     100%;
    
    background-color: red;
}

div#elNav /* (3) */
{
    float:      left;

    width:      200px;
    height:     550px;
    
    background-color: purple;
    
    clear: left;

}

div#elContent /* 4 */
{
    float:      right;
    
    width:      500px;
    height:     550px;
    
    background-color: green;
}

en de bijbehorende html

HTML:

<div id="elContainer">
    <div id="elHeader">
        <div id="elHdrCool">
        </div>
        
        <div id="elHdrPack">
        </div>
    </div>
    
    <div id="elNav">
    </div>
    
    <div id="elContent">
    </div>
</div>

Ik probeer de pagina dus nu zo in te delen
_{linksboven: 1. elHdrCool
rechtsboven: 2. elHdrPack
linksonder: 3. elNav
rechtsonder: 4. elContent}

code:

+---------------------+
|      _  _____       |
|     [1][__2__]      |
|     | ||     |      |
|     |3|| 4   |      |
|     | ||     |      |
|     |_||_____|      |
|                     |
+---------------------+

maar het komt er zo uit te zien:

code:

+---------------------+
|      _  _____       |
| _   [1][__2__]      |
|| |     |     |      |
||3|     |  4  |      |
|| |     |     |      |
||_|     |_____|      |
|                     |
+---------------------+

de linker (paarse) div wordt dus niet meer goed gecentreerd..

Ben al druk aan het proberen geweest met floats en clears, maar krijg het niet goed..

[ Voor 19% gewijzigd door r0bert op 07-02-2004 13:05 ]

[Verwijderd]

1 container, met 4 divjes erin...

code:

#container{
 margin:0 auto;
 width:<length>;
}

Of wil je het niet centreren?

[r0bert]

Ja, één container en daarin moeten de divs 1,2,3 & 4 komen zoals aangegeven:

- 1 & 2 naast elkaar (allebei genest in elNav)
daaronder
- 3 & 4 naast elkaar

[edit]
Bijna per ongeluk, heb ik uitgevonden hoe het iig kan..

Ik heb nu een extra container om elNav en elContent geplaats, en deze de gezamelijke hoogte en breedte van die 2 divjes gegeven. Vervolgens heb ik aan elHeader het regeltje 'clear: right;" toegevoegd en nu staat het goed, alleen jammer van die extra container.. daarom ben ik nog gewoon geinterresseerd in de oplossing van het bovenstaande, want dat lukt me niet

[ Voor 85% gewijzigd door r0bert op 07-02-2004 13:14 ]

[Pendaco]

Ik heb hetzelfde probleem als de ts

Ik ben niet zo heel erg ervaren in css en div'jes, daarom was ik even wat aan t proberen maar ik stuit nu op hetzelfde probleem;

de bovenste tabellen staan bij mij goed, maar de 2 die naast elkaar moeten staan (gecentreerd) staan ieder aan weerszijde van de pagina;

zo wil ik het
_________________
|wit | tabel |wit |
|wit | tabel |wit |
|wit | 1 | 2 |wit |
_________________

maar t staat nu zo;
_________________
|wit | tabel |wit |
|wit | tabel |wit |
| 1t | witje | 2tb |
_________________

iemand die hier een oplossing voor heeft?

css;

code:

div#Container 
{ 
    width:        100%; 
    height:        100%;  
    text-align:    center; 
} 

#header {
    background-color: #CCCCCC;
    height: 40px;
    width: 300px;
    padding: 5px;
    text-align: center;
}
#picture_top {
    background-color: #999999;
    width: 300px;
    padding: 5px;
    height: 300px;
}

#left {
    background-color: #006666;
    width: 150px;
    text-align: left;
    float: left;
    padding: 5px;
}
#right {
    background-color: #006666;
    width: 150px;
    padding: 5px;
    text-align: left;
    float: right;
}

en html;

code:

<html>

<body>
<div id="Container">

<div id="header">
header
</div>

<div id="picture_top">
picture
</div>

<div id="left">
left
</div>

<div id="right">
right
</div>
</div>

</body>
</html>

[ Voor 10% gewijzigd door Pendaco op 26-02-2005 18:35 ]

[Verwijderd]

Ik vind dat niet zo gek, als je de container 100% breed maakt

[Pendaco]

Verwijderd schreef op zaterdag 26 februari 2005 @ 18:36:
Ik vind dat niet zo gek, als je de container 100% breed maakt

Als ik die container een kleiner percentage opgeef, zeg 50%,
dan trekt ie alle div'jes naar de linkerkant van de pagina toe, dus dat wil ook niet echt lekker werken.

of doe ik iets fout? ik ben nog niet zo'n held met css

[Harm]

[rml]Anne in "[ CSS] text-align: center; met meerdere f..."[/rml] al geprobeerd?

[Pendaco]

Harm schreef op zondag 27 februari 2005 @ 12:55:
[rml]Anne in "[ CSS] text-align: center; met meerdere f..."[/rml] al geprobeerd?

heb ik geprobeerd, het lukt wel iets beter maar nog niet helemaal
Alles staat gecentreerd en die onderste 2 divjes staan wel dichter naar het midden toe, maar raken elkaar net niet

Er zitten iets van 10px tussen, maar ik krijg ze niet weg

[Verwijderd]

Wellicht vanwege de twee keer 5px padding? Heb je een voorbeeld met een iets duidelijkere omschrijving van het probleem?