[HTML/CSS] Object centeren naast main column

[Beatboxx]

Ik heb een website met een main column die een static width van 900px heeft en met margin: 0 auto; netjes in het midden blijft staan. Nu wil ik naast die main column een logo neerzetten, maar dan gecentered in de ruimte die over blijft. Zie ook plaatje:



De rode box is dus de main column die automatisch gecentered wordt. De groene box moet gecentered worden in de ruimte die over is. Ik heb werkelijk waar geen idee hoe ik dit kan aanpakken. Iemand met een hint?

[martin149]

Okee daar gaan we:

Het midden van de middelste div zit op 50% van rechts.
(Dit is ook te schrijven als rightt:50%; margin-left:-450px;)

We weten dus dat de rechter van de div. kant op 50%-450px van de rechter zijde van de pagina zit. Het midden hier van zit op 25%-225px, het midden van de logo div. Deze heeft een breedte, laten we zeggen 100px. Daardoor wordt de afstand van de linker zijde tot de rechter zijkant nu 25%-225px+50px=25%-175px.

Code:

HTML:

<div id="content">
</div>
<div id="logo">
</div>

Cascading Stylesheet:

#content{
    position:absolute;
    right:50%;
    top:0px;
    margin-left:-450px;
    width:900px;
    height:500px;
    background-color:#000;
}
#logo{
    position:absolute;
    right:25%;
    top:0px;
    margin-left:175px;
    width:100px;
    height:500px;
    background-color:#0ff;
}

Heb het niet getest... maar zou moeten werken

[Beatboxx]

Bijna helemaal goed! Enige, als je position: absolute; toepast, werken margin's alleen als je die kant ook al absolute hebt gepositioneerd! Je moet dus in dit geval left: 50%; en margin-left: -450px; gebruiken. Verder is je oplossing perfect!