Div che non si allineano in orizzontale

**spiadadda** · 11-12-2006, 17:04

Ciao a tutti,
è da poco che sto studiando l'uso dei CSS e ho letto le guide presenti su HTML.it nella sezione CSS.

Sto facendo qualche prova per capire le varie proprietà dei css e dopo aver fatto un layout monolitico di prova, sto provando a realizzare un layout a due colonne.

In problema sono proprio le due colonne (colonna di sinistra e quella di destra), poichè non riesco ad allinearle in orizzontale ed in particolare la colonna di destra si posiziona sotto la colonna di sinistra. Ecco come compare il layout:

Clicca qua

Mentre io vorrei che il layout fosse così:

Clicca qua

Vi posto anche il codice css :

codice:

html,body{
background-color: #006600;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
body{
font-family: arial,sans-serif; 
font-size: 76%;
 text-align: center; /*centra in IE 5.x */
}
#container {
	margin: 0px auto;
	padding:0px 0px 0px 0px;
	background-color: #009900;
	width: 760px;
	border-right: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
}
div#header {
width: 760px;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border: none;
}
div#menu_centrale {
background-color: #FF9900;
width: 760px;
height: 30px;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border: none;
}
div#box_contenitore {
	background-color: #FFFFFF;
	margin: 5px 5px 5px 5px;
	padding:5px 5px 5px 5px;
	border: none;
	width: 740px;
	text-align: left;
	float: left;	
}
div#box_sinistra {
    background-color: #00FFFF;
	float: left;
	width: 140px;
	margin: 0px 0px 0px 0px;
	padding:5px 5px 5px 5px;
}
div#box_destra {
	float: left;	
	background-color: #FFFF00;
	margin-left: 5px;
	padding:5px 5px 5px 5px;
	width: 595px;
}
div#footer {
clear: both; 
background-color: #FF9900;
margin: 0px 0px 0px 0px ;
padding:5px 5px 5px 5px;
border: none;
width: 750px;
height: 50px;
}

Codice HTML :

codice:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/script/css/layuot4.css" rel="stylesheet" type="text/css">
</head>
<body>

<div  id="container">
<div id="header"><h1>HEADER</h1></div>   
<div id="menu_centrale"><h4>Navigazione centrale</h4></div>

<div id="box_contenitore">
<div id="box_sinistra"><h2>Colonna di Sinistra </h2></div>
<div id="box_destra">
<h2>Colonna di destra un cui si sviluppa il contenuto</h2>    
</div> 
</div> 

<div id="footer"><h2>Footer</h2></div>

</div>
</body>
</html>

Come potete vedere il box della colonna di destra e il box della colonna di sinistra, si trovano in un terzo div (div_contenitore). Ho notato che eliminando il DIV_CONTENITORE il layuot è visualizzato perfettamente e le due colonne in questione si allineano perfettamente in orizzontale.....solo che in tal caso non riesco ad ottenere lo sfondo bianco sotto alle due colonne.
Qualcuno di voi è così gentile da potermi aiutare a capire dove è che sbaglio??
Ho provato in vari modi ma non riesco proprio a capire dove sia l'errore e perchè non funzioni correttamente.

Grazie
Ciao Ciao

**Mich_** · 11-12-2006, 17:24

Stai sbagliando a fare le somme.

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Come vedi, devi o ridurre la dimensione dei blocchi interni, oppure allargare il contenitore.
Per avere un comportamento uguale in IE e altri browser, puoi usare i margini al posto dei padding (se non da` fastidio al layout); in alternativa devi impostare la larghezza diversa in IE, ad esempio tramite i commenti condizionali.

Altro approccio e` usare un layout fluido: che si adatta cioe` alla larghezza della finestra del browser (vedi i layout proposti tra i "link utili" del forum).

**spiadadda** · 11-12-2006, 18:18

Ciao e grazie per la tua risposta.
Ho fatto come mi hai consigliato, ovverro azzerato il padding e sto usando solo i margini!
Effettivamente ho potuto notare che modificando (diminuendo) la larghezza del DIV_CONTENITORE, ovvero il div che contiene la colonna di destra e quella di sinistra, il layout si dispone nella maniera giusta.....anche se con una piccola differenza di margini tra Explorer e firefox!

Il problema riguarda il margine destro del DIV_CONTENITORE.
Infatti esso è impostato a 5px, ma poichè ho dovuto diminuire le dimensioni (altrimenti il div era troppo largo) in explorer il margine che viene visualizzato è di 5px effettivi, mentre in firefor e opera il margine destro è più grande...ad occhio e croce direi 10-12px (mentre se aumento il width il margine è di nuovo corretto, ma con explore il div diventa troppo grosso

)

E' possibile evitare questo inconveniente???

**Mich_** · 11-12-2006, 18:28

in alternativa devi impostare la larghezza diversa in IE, ad esempio tramite i commenti condizionali.

Tra i "link utili" c'e` anche come usare i commenti condizionali (credo sia nella sezione degli hack per IE).

Discussione: Div che non si allineano in orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Div che non si allineano in orizzontale

Permessi di invio