[css] Div centreert niet zoals hoort

[BlueCola]

Hoi allemaal,

Ik heb heel vaak layout gesliced, en divs gecentreert, maar krijg nu een probleem dat ik nog nooit heb gezien.
*weg*

Zoals je ziet word de div niet goed gecentreert. Echter, als je nu zelf even met firebug de width van de container aanpast in 1000px dan wordt hij wél gecentreert.

Dit is mijn stukje code:

code:

body {
background: url('images/background.gif') repeat-x;
}

#container { 
    width: 1170px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#header{
margin-right: 20%;
width: 719px;
height: 229px;
background-image: url('images/header.png');
background-repeat: no-repeat;
}

#content {
behavior: url('border-radius.htc');
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
background-color: #FFF;
height:768px;
width:1024px;
padding-top:5px;
}

Ook heb ik dit geprobeerd:

code:

#container { 
    position: absolute; 
    width: 1170px; 
    height: 768px; 
    top: 50%; 
    left: 50%; 
    margin: -384px 0 0 -585px; 
}

En ook:

code:

#container { 
    margin: 0px auto;
    width: 1170px; 
    height: 768px; 
}

Heb op verschillende fora's mijn probleem gepost, en ook veel gegoogled. Vind het héél vreemd.

Alvast bedankt,
Marijn

[ Voor 3% gewijzigd door MueR op 22-06-2010 10:16 ]

[Phoenix1337]

Mag ik vragen wat er dan niet precies gecentreerd word? Je content div is kleiner dan je container div. De container staat dus wel degelijk in het midden.

[Rekcor]

Over welke div heb je het nu precies?

De container-div wordt bij mij prima gecentreerd, alleen de content-div daarin niet (waardoor het lijkt dat de container-div niet in het midden staat, maar die is dan een stuk breder).

[Rekcor]

Voeg aan #content eens: margin:auto toe?

[BlueCola]

Godverdekut, ik zat gewoon niet op te letten denk ik. Content dus op dezeldfde manier centreren.

Nog een vraag. De header, heb ik staan margin-right:20%; Maar er gebeurt echter niks?

Rekcor schreef op dinsdag 22 juni 2010 @ 09:41:
Voeg aan #content eens: margin:auto toe?

Done, het werkt nu, alleen nog even verticaal centreren.

[ Voor 36% gewijzigd door BlueCola op 22-06-2010 09:44 ]

[d4jo]

Je marign right werkt wel hoor? Kijk eens in firebug, echter hij lijnt links uit dus je ziet niets gebeuren..

/edit te laat

Zoals hierboven al vermeld wordt, je container is 1170px en staat netjes in het midden. De container staat daarin met 1024px maar wordt daar links in uitgelijnd en staat dus te veel naar links. Resize je container div naar 1024 en hij staat netjes in het midden

[ Voor 19% gewijzigd door d4jo op 22-06-2010 09:44 ]

[Phoenix1337]

Wat wil je met je header div dan, hij heeft wel een margin van 20% hoor. Dat kan je ook zien in firebug.

[Matis]

Blue-cola schreef op dinsdag 22 juni 2010 @ 09:42:
Godverdekut, ik zat gewoon niet op te letten denk ik. Content dus op dezeldfde manier centreren.

Nog een vraag. De header, heb ik staan margin-right:20%; Maar er gebeurt echter niks?

Installeer eens een goede DOM-viewer (Firebug voor Firefox oid), want hij geeft hier prima aan dat er een 204px-brede margin wordt ingebouwd aan de rechterkant.

[BlueCola]

Phoenix1337 schreef op dinsdag 22 juni 2010 @ 09:44:
Wat wil je met je header div dan, hij heeft wel een margin van 20% hoor. Dat kan je ook zien in firebug.

Dat hij tegen de rechter rand van de content aan komt te staan.

Matis schreef op dinsdag 22 juni 2010 @ 09:44:
[...]

Installeer eens een goede DOM-viewer (Firebug voor Firefox oid), want hij geeft hier prima aan dat er een 204px-brede margin wordt ingebouwd aan de rechterkant.

In IE staat de header toch echt tegen de linkerkant van de content div aan.

[ Voor 42% gewijzigd door BlueCola op 22-06-2010 09:47 ]

[Matis]

Blue-cola schreef op dinsdag 22 juni 2010 @ 09:45:
Dat hij tegen de rechter rand van de content aan komt te staan.

Met een margin-right zorg je er alleen maar voor dat de content steeds verder naar links komt te staan.

[BlueCola]

Fack, laat maar. Ik ga wel verder als ik een keer beter op let. Niveau komt nu wel erg laag te liggen door mijn doen. Dank jullie wel voor de hulp!

[d4jo]

Matis schreef op dinsdag 22 juni 2010 @ 09:47:
[...]

Met een margin-right zorg je er alleen maar voor dat de content steeds verder naar links komt te staan.

Margin-right gaat daar idd niet voor zorgen, een float:right of padding/margin-left wel..

[Phoenix1337]

of een position: relative en een right: 0px; hoewel ik moet zeggen dat ik de float: right de netste oplossing vind.

[MueR]

Blue-cola schreef op dinsdag 22 juni 2010 @ 09:51:
Niveau komt nu wel erg laag te liggen door mijn doen.

Fijn dat je het zelf inziet. Ik ga dit topic dichtgooien. Zou je in het vervolg je testcase niet achter een login willen zetten trouwens?