div sinistro e div desto

[giovivent]

Ciao a tutti!
ho un problema con due div affiancati. Quando si estende la pagina si scompongono.
se vedo a risoluzioni maggiori la pagina si scompone e lo sfondo del div destro non compre l'area al 100%

come posso fare?

il css che cerco di usare è questo:

#topleft, #topright{
    float:left;
	height:275px;
	margin: auto; overflow:auto;

}

#topleft{

    background-image: url(immagini/topsx.jpg);
    background-repeat: repeat;
    width:687px;
	position:fixed;
	
}

#topright{
    left:276px;
    width:47%;
    background:#9B9887;
}

[giovivent]

ho provato a fare così, ma il div sinistro va sotto e non si allinea:

#box-1{

margin-top:auto;
margin-left:688px;
height:275px;
background-color:#9B9887;
font-size:1em;

}
#box-2{
width:687px;
height:275px;
background-image: url(immagini/topsx.jpg);
margin:0px;
font-size:1em;
}

[ldetomi]

Prima usi #topleft e #topright e poi #box-1 e #box-2 .... come possiamo capire ciò che fai!?!?!?
Di sicuro c'è un errore nella prima dichiarazione di #topright, la regola "left" in un float non ha senso, serve solo per i posizionamenti assoluti e relativi.

Oltre a questo, metti online una versione di prova, posta un link, e poi vediamo.

[giovivent]

ho risolto in questo modo:

@charset "UTF-8";
/* CSS Document */

html,body{
    height:100%;
    margin:0;
	padding: 0;
	margin: 0;
	line-height: 1.5em;
	font-family: century gothic;
	font-size: 0.9em;
	overflow-x: hidden; 
	overflow-y: hidden;
	background:#9B9885;
}

#wrapper { width:100%; height:270px; }
.sx { 
   background-image: url(img/topsx.jpg);
   background-repeat:none;
   height:89px;
   width:683px;
   float:left;
   
}
.dx { 
   margin-top:0px;
   margin-left:683px;
   height:89px;
   background-image: url(img/topdx.jpg);
   background-repeat:repeat-x;
}


#container { width:100%; margin-top:-181px; }

.centrosx{
float:left; 
width:105px; 
height:439px;
background-image: url(img/centrosx.jpg);
background-repeat:none;
}

.centromiddle{
float:left;
width:578px; 
height:439px;
background-image: url(img/centromiddle.jpg);
background-repeat:none;
}

.centrodx{
float:left;
width:45%; 
height:439px;
background:#9B9885;
}


#wrapper1 { width:100%; height:69px; }
.sx1 { 
   background-image: url(img/prefootersx.jpg);
   background-repeat:none;
   height:69px;
   width:783px;
   float:left;
   
}
.dx1 { 
   margin-top:439px;
   margin-left:783px;
   height:69px;
   background-image: url(img/prefooterdx.jpg);
   background-repeat:repeat-x;
}

#bottom { width:100%; height:65px; height:270px }
.bottomsx { 
   background-image: url(img/footersx.jpg);
   background-repeat:repeat-y;
   height:300px;
   width:683px;
   float:left;
   
}

#navcontainer ul
{
padding: 1.0em 0;
margin: 0;
list-style-type: none;
background-color: #AAA697;
color: #FFF;
width: 70%;
text-align: left;
font-family: century gothic;
padding-left:90px;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #AAA697;
color: #FFF;
padding: .2em 1em;
font-family: century gothic;
}

li a:hover
{
	background-color: #959885;
	color: #fff;
	font-family: century gothic;
}

però il font del menu a volte lo prende a volte no, e su opera questo css non funziona! help!

[ldetomi]

Intendi il "Century Gothic"? Quando inserisce un attributo composto da più parole devi sempre circondarlo da virgolette o apici, in modo che lui sappia che si tratta di un valore unico. Prova a scrivere il font come te l'ho scritto io....

[giovivent]

grazie! mentre come mai su opera il layout viene sfalsato?