contenuto centrale e float in layout a 3 colonne

**alfi** · 02-08-2007, 11:12

Salve,
sto provando a realizzare un sito a 3 colonne fisse con i css: con due colonne laterali e una parte centrale di contenuto. Ho scelto il layout che mi sembrava più adatto tenendo conto che è un sito con contenuti dinamici quindi non posso sapere di quando si estenderà la colonna centrale. Sembrava tutto a posto, testato su IE, Opera e Firefox finchè non ho inserito nella colonna centrale 2 news così formate: testo + foto allineata con float left + clear per mandare a capo, la seconda news si posiziona nel punto in cui finiscono le due colonne laterali. Ho letto sul forum che molti hanno avuto lo stesso problema dovuto ai float e ho provato le soluzioni proposte ma sconvolge tutta la mia struttura. Potete darmi un suggerimento?
Questa è la pagina base:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	padding: 0px;
	margin:0px;
	text-align: center;
	font-size: 70%; font-family: Verdana, Arial, Helvetica, sans-serif;color:#000000
	}
#container {
	position: relative;
	width:760px;
	margin: 0 auto;
	text-align: left; 
}

#header{
	border: 1px solid #FF0000;
	padding:1em 0;
	height:117px;
	width: 760px; 
	margin-bottom:0px;
}
#navigationsx{
	border: 1px solid #FF0000;
	float: left;
	margin-top: 10px;
	width: 160px;\width:170px;w\idth:160px;
}
#navigationdx {
	border: 1px solid #FF0000;
	float: right;
	margin-top: 10px;
	width: 160px;\width:170px;w\idth:160px;
}

#contenuto {
	border: 1px solid #FF0000;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 0;
	margin: 0px 170px;
	text-align:justify;
}


#footer{
	border: 1px solid #FF0000;
	clear: both;
	font-size: 90%;
	text-align:center;
	margin-top:20px;
	padding: 5px 0;
	color: #000
}
.clearer{clear:left;}
img{float:left;}

</style>
</head>

<body>
<div id="container">
<div id="header">
testata
  </div>
<div id="navigationsx">
colonna sinistra
</div>
<div id="navigationdx">
colonna destra
</div>
<div id="contenuto">
<div id="breadCrumb">Sei in Homepage</div>



bla bla bla bla
</div>
 </div>
<div id="footer">
piede
</div>
</body>
</html>

grazie

**oskaron** · 02-08-2007, 11:40

il problema nasce dal fatto che il clear:left non vuole avere altri elementi flottanti a se, comunque a me cosi non da problemi:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento senza titolo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {

    padding: 0px;

    margin:0px;

    text-align: center;

    font-size: 70%; font-family: Verdana, Arial, Helvetica, sans-serif;color:#000000

    }

#container {

    position: relative;

    width:760px;

    margin: 0 auto;

    text-align: left; 

}



#header{

    border: 1px solid #FF0000;

    padding:1em 0;

    height:117px;

    width: 760px; 

    margin-bottom:0px;

}

#navigationsx{

    border: 1px solid #FF0000;

    float: left;

    margin-top: 10px;

    width: 160px;\width:170px;w\idth:160px;

}

#navigationdx {

    border: 1px solid #FF0000;

    float: right;

    margin-top: 10px;

    width: 160px;\width:170px;w\idth:160px;

}



#contenuto {

    border: 1px solid #FF0000;

    padding-right: 10px;

    padding-left: 10px;

    padding-top: 0;

    margin: 0px 170px;

    text-align:justify;

}





#footer{

    border: 1px solid #FF0000;

    clear: both;

    font-size: 90%;

    text-align:center;

    margin-top:20px;

    padding: 5px 0;

    color: #000

}

.clearer{clear:left;}

img{float:left;}



</style>

</head>



<body>

<div id="container">

<div id="header">

testata

  </div>

<div id="navigationsx">

colonna sinistra

</div>

<div id="navigationdx">

colonna destra

</div>

<div id="contenuto">

<div id="breadCrumb">Sei in [b]Homepage[/b]</div>

[img]http://www.google.it/ig/images/skins/cityscape/10am/igoogle_logo.png[/img]






bla bla bla bla

</div>

 </div>

<div id="footer">

piede

</div>

</body>

</html>

**alfi** · 02-08-2007, 15:45

quello che volevo ottenere io è la classica visualizzazione di un elenco news: più news una sotto l'altra formate da una miniatura allineata a sinistra con del testo attorno. Se lo faccio con codice postato mi manda la seconda news in fondo. L'esempio che mi hai mandato tu non è il risultato che vorrei ottenere, non c'è una soluzione?

Discussione: contenuto centrale e float in layout a 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

contenuto centrale e float in layout a 3 colonne

Permessi di invio