tre colonne

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Salve a tutti,

Dovrei dividere lo schermo a tre colonne sx centro dx. E stendere delle righe in verticale (cosa che non so fare). Questo quanto ho fatto fino ad ora. Ottenendo tre testi uno a sx uno al centro e uno a dx ma quello di dx mi viene sfalzato. Lo dovrei portare in linea con gli altri. Posto il codice:

PHP:
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--http://www.ideepercomputeredinternet.com/2013/05/dividere-post-blogger-colonne.html Qua si trova l'sempio-->
    <style type="text/css">
#col1 {
float: left;

}
#col2 {


text-align:center;

#col3 {
float: right;
height: 1px;
}

</style>
         
    </head>
<div id="col1">
Testo da visualizzare nella prima colonna.</div>
<div id="col2">
<div style="text-align:center">
Testo da visualizzare nella seconda colonna.</div></div>
<div id="col3">
    <div style="float: right;">
Testo da visualizzare nella terza colonna.</div></div>
<div style="clear: both;">
</div>
</div>
    
     
    <body>
        <?php
        // put your code here
        ?>
    </body>
</html>

In pratica ho la difficoltà sulla terza colonna che viene posizionata male: Ma le righe in verticale come diavolo si fanno ??? In orizzontale c'è il tag <hr> però in verticalenon ho capito come si fa. Spero che qualcuno mi possa dare una mano grazie.
 
Ultima modifica di un moderatore:
ciao
intanto guarda che i <div> devi metterli tra <body> e </body> e non tra </head> e <body>
e poi perche fai tutto quel caos coi div
comunque prova così (ho messo i colori di bck per evidenziarli), ho dato il border ai div

HTML:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--http://www.ideepercomputeredinternet.com/2013/05/dividere-post-blogger-colonne.html Qua si trova l'sempio-->
<style type="text/css">
#col1{
	display:block;
	float: left;
	background-color:#99CC66;
	width:33%;
	height:auto;
	text-align:center;
	border-left:2px solid #000000;
}
#col2 {
	display:block;
	float: left;
	background-color:#CCFFCC;
	width:33%;
	height:auto;
	text-align:center;
	border-left:2px solid #000000;
	border-right:2px solid #000000;
}
#col3 {
	display:block;
	float: left;
	background-color:#99CCCC;
	width:33%;
	height:auto;
	text-align:center;
	border-right:2px solid #000000;
}
</style>      
</head>
<body>
<div id="col1">
Testo da visualizzare nella prima colonna.
</div>
<div id="col2">
Testo da visualizzare nella seconda colonna.
</div>
<div id="col3">
Testo da visualizzare nella terza colonna.
</div>
</body>
</html>
 

Discussioni simili