layout 2 colonne centrato, larghezza fissa

[Galex]

ciao,
sto cercando di utilizzare il layout a due colonne preso da una delle guide di questo sito:

(Larghezza fissa, centrato)

...il problema però è che il div content si sposta sotto al div menu, invece di stare alla sua destra....in IE lo fa con qualsiasi contenuto nel div content, mentre in Firefox solo in alcune pagine...mi sapreste dire da cosa può dipendere???




html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size:11px;text-align: center}



div#container{
width:780px;
margin: 0 auto;text-align: left;
border-left: 2px solid #36c;
border-right: 2px solid #36c;
}


div#header{
background:#FFFFFF;
background:url(../images/bg_intestazione.gif) left top;
background-repeat:repeat-x;
}

div#content{
margin-right:180px;
border:1px solid #000000;
width:780px;
}

div#footer{
clear:left;
text-align:center;
padding:0.5em;
background-color:#69c;
color:#000;
}

div#menu{float:left;width: 180px}
div#menu ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#menu li{margin: 0;padding: 0}
div#menu a{color:#369;font: normal bold 11px arial,sans-serif;text-decoration: none}
div#menu a:hover{color: #033;text-decoration: underline}
div#menu a#activelink{color: #033;text-decoration: none}


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

<div id="menu">
AAAAAAA
</div>

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

<div id="footer">
CCCCCCC
</div>
</div>

[ayrtonsenna]

hai provato a mettere il float:right; al content?

[Mich_]

Hai sbagliato a fare i conti del box-model.
780 + 1 + 1 e` maggiore di 780 (quindi gia` il content non ci sta dentro il container).

L'altro pezzo non lo ho analizzato, ma suppongo ci sia lo stesso errore.

[Galex]

nell'esempio la larghezza al content non è impostata, è necessario metterla?

ho provato diminuendola diminuendola ma in IE il problema rimane...c'era solo quello di sbagliato?

html,body{
margin:0;
padding:0;
}

body{
font-family:arial,sans-serif;
font-size:11px;
text-align:center;
}

div#container{
width:780px;
margin:0 auto;
text-align:left;
border-left: 1px solid #36c;
border-right: 1px solid #36c;
}

div#header{
background:#FFFFFF;
background:url(../images/bg_intestazione.gif) left top;
background-repeat:repeat-x;
}

div#menu{
float:left;
width:180px;
}

div#content{
margin-right:180px;
border:1px solid #000000;
width:700px;
}

div#footer{
clear:left;
text-align:center;
background-color:#69c;
color:#000;
}

[Mich_]

Il tuo content e` largo 880 px. Come fa a starci nel #container che e` largo 780 px?
Ti avevo gia` detto che ci sono errori nelle somme!

[Galex]

hai ragione.abbi pazienza

se interessa ora così sembra funzionare.
...è possibile con i css posizionare un div al centro di content, che però abbia posizionamento assoluto visto che deve stare sopra al contenuto di content?

#container {
width: 780px;
\width: 800px;
w\idth: 780px;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
padding:0px;
background-color:#FFFFFF;
background-image:url(../images/sfondo_ORI.gif);
background-position:bottom left;
background-repeat:no-repeat;
}

#intestazione {
padding: 5px;
background:#FFFFFF;
background:url(../images/bg_intestazione.gif) left top;
background-repeat:repeat-x;
}

#content {
margin-left:170px;
width:600px;
border:1px solid #808080;
}

#menu{
float:left;
width:165px;
text-align:left;
margin-top:2px;
background-image:url(../images/bg_menu.gif);
background-position:top left;
background-repeat:no-repeat;
}

#footer{
clear: both;
padding:5px;
background:#FFFFFF;
background:url(../images/bg_intestazione.gif) left bottom;
background-repeat:repeat-x;
}

[Mich_]

...è possibile con i css posizionare un div al centro di content, che però abbia posizionamento assoluto visto che deve stare sopra al contenuto di content?

Si`. Il fatto che ci sia un posizionamento assoluto non cambia il problema.
E` come se avessi due siti (quasi) indipendenti, uno (parzialmente) sovrapposto all'altro. Gli oggetti si posizionano sempre relativamente al contenitore (salvo posiz. assoluti in qualche browser).

Ora ho dei dubbi di interpretazione della domanda ... Faccio un esempio

<body>
  <div id="normale">
    
  </div>
  <div id="coprente">
    <div class="centrato">
      
    </div>
  </div>
</body>

Naturlamente normale avra` i suoi CSS standard.
Coprente dovra` essere grande come body, con sfondo trasparente, senza bordi, posizionamento assoluto in posiz. 0,0, eventualmente con il text-align: center
centrato sara` posizionato con i margini automatici, eventualmente con il text-align: left

[Galex]

così però centro il div "centrato" rispetto alla pagina, non rispetto al dic "content"...o sbaglio?

[Mich_]

Esatto, ma se il div trasparente e` uguale a quello che vuoi centrare potrebbe andar bene.
(scusa, non ero entrato nei dettagli: mi premeva farti capire il trucco; al resto dovresti pensarci da solo).

[Galex]

ah ok.centrare il div nella pagina non è 1 problema...io però volevo centrarlo nel div content, e visto il layout fatto prima, content è spostato + sulla destra rispetto al centro della pagina, (essendoci il menù sulla sinistra) e in altezza varia in base al contenuto che ci va dentro...in queste condizioni non saprei proprio come ricreare il div "normale" con le stesse dimensioni e posizione di "content"...

per ora riesco a posizionare un box al centro di "content" con JS, ma volevo evitare di dover far tutti quei calcoli se si poteva risolvere con CSS...ma penso ke sia l'unica via...


grazie dell'aiuto