Problema Centrare Div

frankodeh

Problema Centrare Div

index:
<body>
<div id="logo"><img src="xxx.JPG" alt="xxx" width="750" height="167" /></div>
<div id="menuSx">
</div>
<div id="main"></div>
</body>

logo.css:
@charset "utf-8";
#logo {
position: absolute;
height: 150px;
width: 750px;
left: 10px;
top: 3px;
}

menuSx.css:
@charset "utf-8";
#menuSx {
position: absolute;
height: 500px;
width: 160px;
top: 175px;
background-color: #000000;
left: 10px;
vertical-align: middle;
}

main.css:
@charset "utf-8";
#main {
position: absolute;
height: 500px;
width: 583px;
left: 175px;
background-color:;
color: #FFFFFF;
top: 175px;
}

E così sono posizionati correttamente tra loro ma in alto a sinistra del browser.
Come posso centrarli (orizzontalmente) ?
Se inserisco un div id="contenitore" con quali attributi devo impostarlo (nel css) ed eventualmente quali attributi devo modificare negli altri div ?

loryzz

@frankodeh said:

E così sono posizionati correttamente tra loro ma in alto a sinistra del browser.
Come posso centrarli (orizzontalmente) ?
Se inserisco un div id="contenitore" con quali attributi devo impostarlo (nel css) ed eventualmente quali attributi devo modificare negli altri div ?

Solitamente con il codice:

#container {
    margin-left: auto; 
    margin-right: auto;
}

si riesce ad eccentrare un box all'interno della pagina..

frankodeh

Si a quel modo si centra.
Ma poi come posso risettare gli altri 3 div dentro al nuovo #container mantenendo rapporti a posizione precedentemente assegnati ?

ciucciarello

@frankodeh said:

Si a quel modo si centra.
Ma poi come posso risettare gli altri 3 div dentro al nuovo #container mantenendo rapporti a posizione precedentemente assegnati ?
Questo accade perchè usi il sistema del posizionamento assoluto per i div contenuti nel container.
Prova a settare i margini degli altri 3 div senza ricorrere ai posizionamenti assoluti.