Problema Livelli

[Miroku]

Ciao a tutti, a me servirebbe fare una cosa del genere con i livelli:


e utilizzo il seguente codice html:

<div id="maincontainer" align="center">
  <div id="halfmaincontainer">
    <div id="logo" align="center"></div>
    <div id="colonne">
      <div id="colonnasx">

        

        

        

        

      </div>
      <div id="colonnadx">

        

        

        

        

      </div>
    </div>
  </div>
  <div id="halfmaincontainer">
    <div id="basecolonne">ciao ciao</div>
  </div>
</div>

e i seguenti css:

body{
background:#000000;
margin:0px;
}

#maincontainer{
background:url(../layout/sfumatura.jpg) top center no-repeat;
width:1000px;
height:800px;
margin:auto;
}
#halfmaincontainer{
width:1000px;
margin:0px;
}

#logo{
background:url(../layout/logo.png) top center no-repeat;
width:1000px;
max-height:218px;
padding-top:170px;
}

#colonne{
width: 840px;
margin-top:8px;
}

#colonnasx{
background: url(../layout/SfondoBiancoTrasp.png);
float:left;
width:400px;
}

#colonnadx{
background: url(../layout/SfondoBiancoTrasp.png);
float:right;
width:400px;
}

#basecolonne{
background: url(../layout/SfondoBiancoTrasp.png);
width:840px;
height:139px;
}

con Explorer non c'è nessun problema, mi posiziona i livelli come gli dico.
Il problema si presenta con Opera e Firefox che me li visualizza sovrapposti, così:


Come posso fare?

Grazie in anticipo.

[Miroku]

ma soprattutto a me servirebbe che il livello "basecolonne" sia in fondo al livello "colonne"

<div id="maincontainer" align="center">
    <div id="logo" align="center"></div>
    <div id="colonne">
      <div id="colonnasx">

        

        

        

        

      </div>
      <div id="colonnadx">

        

        

        

        

      </div>
    </div>
    <div id="basecolonne">ciao ciao</div>
</div>

Solamente che mi dà lo stesso problema di sovrapposizione dei livelli su Opera o Firefox mentre su IE lo visualizza come voglio ma nel "basecolonne" non mi fa vedere lo sfondo di "colonne".... o_ò

Aiuto....

[Miroku]

Per lo sfondo ho risolto così:

<div id="maincontainer" align="center">
  <div id="logo" align="center"></div>
  <div id="colonnesfondo">
    <div id="colonne">
      <div id="colonnasx"></div>
      <div id="colonnadx"></div>
    </div>
    <div id="basecolonne"></div>
  </div>
</div>

Però rimane sempre l'elemento sovrapposizione su Opera e Firefox

[Miroku]

up

please =.=

[Miroku]

non mi riesce ad aiutare proprio nessuno?

[simulacron]

Originariamente inviato da Miroku
Ciao a tutti, a me servirebbe fare una cosa del genere con i livelli:


e utilizzo il seguente codice html:

<div id="maincontainer" align="center">
  <div id="halfmaincontainer">
    <div id="logo" align="center"></div>
    <div id="colonne">
      <div id="colonnasx">

        

        

        

        

      </div>
      <div id="colonnadx">

        

        

        

        

      </div>
    </div>
  </div>
  <div id="halfmaincontainer">
    <div id="basecolonne">ciao ciao</div>
  </div>
</div>

e i seguenti css:

body{
background:#000000;
margin:0px;
}

#maincontainer{
background:url(../layout/sfumatura.jpg) top center no-repeat;
width:1000px;
height:800px;
margin:auto;
}
#halfmaincontainer{
width:1000px;
margin:0px;
}

#logo{
background:url(../layout/logo.png) top center no-repeat;
width:1000px;
max-height:218px;
padding-top:170px;
}

#colonne{
width: 840px;
margin-top:8px;
}

#colonnasx{
background: url(../layout/SfondoBiancoTrasp.png);
float:left;
width:400px;
}

#colonnadx{
background: url(../layout/SfondoBiancoTrasp.png);
float:right;
width:400px;
}

#basecolonne{
background: url(../layout/SfondoBiancoTrasp.png);
width:840px;
height:139px;
}

con Explorer non c'è nessun problema, mi posiziona i livelli come gli dico.
Il problema si presenta con Opera e Firefox che me li visualizza sovrapposti, così:


Come posso fare?

Grazie in anticipo.

il div halfmainqualchecosa a cosa serve?Se contiene solo il piedipagina, puoi toglierlo.....
Le due colonne devono essere float:left; o float:right;
basecolonne deve contenere la riga clear:left o right(dipende,ovviamente da cosa hai messo prima)

[Miroku]

niente da fare....

index.html

<body>
<div id="maincontainer" align="center">
  <div id="logo" align="center"></div>
  <div id="colonnesfondo">
      <div id="colonnasx">

        

        

        

        

      </div>
      <div id="colonnadx">

        

        

        

        

      </div>
    <div id="basecolonne"></div>
  </div>
</div>
</body>

stile.css

body{
background:#000000;
margin:0px;
}

#maincontainer{
background:url(../layout/sfumatura.jpg) top center no-repeat;
width:1000px;
height:800px;
margin:auto;
}

#logo{
background:url(../layout/logo.png) top center no-repeat;
width:1000px;
max-height:218px;
padding-top:170px;
}

#colonnesfondo{
width: 840px;
margin-top:8px;
background:url(../layout/SfondoColonneCompleto.png) top no-repeat;
}

#colonne{
width: 840px;
}

#colonnasx{
background: url(../layout/SfondoBiancoTrasp.png);
float:left;
clear:left; 
width:398px; /*ovvero 400px - 2px di bordo (destro e sinistro)*/
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
border-top: 1px #FFFFFF solid;
}

#colonnadx{
background: url(../layout/SfondoBiancoTrasp.png);
float:right;
clear:right; 
width:398px;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
border-top: 1px #FFFFFF solid;
}

#basecolonne{
background: url(../layout/SfondoBaseColonne.png);
width:840px;
height:139px;
}

basecolonne si sovrappone ancora a colonnadx e colonnasx

[Miroku]

aaah aspetta... ho sbagliato a leggere il tuo mex... ora provo nel modo giusto (oops)

[Miroku]

e infatti aggiungendo

clear: right;

al colonnabase ora funziona =D

Grazie mille!!!!

[simulacron]

Originariamente inviato da Miroku
e infatti aggiungendo

clear: right;

al colonnabase ora funziona =D

Grazie mille!!!!

nulla.....