Per centrare un elemento figlio rispetto all'elemento padre, solitamente si imposta, per l'elemento figlio, la larghezza fissa ed i margini laterali come "auto".
Un semplice esempio:
codice:
<html>
<head>
<style>
#padre{background:#88f}
#figlio{width:100px;margin:0 auto;background:#f88}
</style>
</head>
<body>
<div id="padre"> PADRE
<div id="figlio">FIGLIO</div>
</div>
</body>
</html>
Nel tuo caso potresti applicare tali regole al div content ma ovviamente devi impostargli una larghezza fissa. Il body farà, in questo caso, da elemento padre.
Tieni conto però che, secondo il tuo script, il div content scorre sotto il div leftbar perché, a quest'ultimo, gli hai dato position:fixed che lo toglie dal flusso della pagina. Se vuoi che il content scorra soltanto lungo lo spazio disponibile (cioè nello spazio non occupato dalla barra) devi fare qualche altro accorgimento. Una semplice soluzione può essere quella di dare al body un padding-left uguale alla larghezza della barra.
codice:
<html>
<head>
<style>
body{
padding-left: 200px;
}
#leftbar{
width: 200px;
height: 100%;
background: black;
position: fixed;
left: 0;
}
#content{
width: 800px;
margin: 0 auto;
height: auto;
overflow: hidden;
}
#left{
width: 570px;
height: 400px;
float: left;
border: 1px solid blue;
}
#rightone, #righttwo{
width: 200px;
height: 200px;
float: left;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="leftbar"></div>
<div id="content">
<div id="left"></div>
<div id="rightone"></div>
<div id="righttwo"></div>
</div>
</body>
</html>
Rispondi quotando
