Css e proprietà float

**UnNamed** · 07-04-2004, 15:03

All'interno del mio codice ho un blocco <div> al cui interno, spostato sulla sinista, c'è un altro blocco con proprietà float:left. Inserisco il testo (che mi viene posizionato a destra del div), ma il numero di caratteri del testo non supera la lunghezza vertivale del box con proprietà float. il blocco <div>, conterrà quindi il testo senza tenere conto della lunghezza verticale del blocco float, che si sovrappone in maniera alquanto strana sopra di esso. COme risolvo il problema?

Questo il risultato:
Pagina di prova

Importante: lo stesso difetto mi si presenta anche se al posto del blooco Float metto un'immagine con allineamento left

Questo il dodice del CSS:

html,body{
text-align: center; /*centra in IE 5.x */
margin: 0px auto;
padding: 0px;
height:100%;
}

div#container{
width: 960px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
height:100%;
}

/*blocco centrale*/
#desc{
float:left;
width:810px;
margin:0px;
height:100%;
}

/*blocco destro*/
#block{
background: url(image/blocklog.jpg) repeat-y;
width:150px;
float:right;
padding: 0px;
height:100%;
}

/*blocco interno al blocco destro*/
.box{
background:#CCCCCC url(image/block.jpg) repeat-y;
margin:4px;
border:1px solid black;
font: 10px/10px Arial,sans-serif;
}

.boxint{
margin:2px 0px 2px 4px;
font: 10px/10px Arial,sans-serif;
}

/*titolo*/
.tit{
background-color:#CC9999;
font: bold 11px Arial,sans-serif;
color:white;
}

/*footer*/
#footer{
clear:left;
text-align:center;
background-color:#666666;
font: bold 11px Arial,sans-serif;
color:white;
}

/*ulteriore blocco interno*/
#descint{
margin:10px;
background-color:#CCCCCC;
font: 12px/12px Arial,sans-serif;
border:2px solid white;
}

/*blocco interno posizionato a destra con un float*/
#info{
background: url(image/blocklog.jpg) repeat-y;
float:left;
margin:3px;
border:2px solid white;
width:170px;
}

**span** · 07-04-2004, 15:27

con firefox è tutto sballato, se ti può servire: http://atomsurfer.altervista.org/xht...s_floating.php

spiega come fare il telaio di un layout con la proprietà float ed ottenere un risultato un po' più compatibile

**herrel** · 07-04-2004, 16:59

in pratica vuoi che il div "info" sia contenuto senza uscire dal suo contenitore? :master:

**span** · 07-04-2004, 17:11

Originariamente inviato da herrel
in pratica vuoi che il div "info" sia contenuto senza uscire dal suo contenitore? :master:

prova ad aprire la pagina con un browser che non sia IE, e vedi che i problemi sono anche altri

**herrel** · 07-04-2004, 17:18

non legge il css

**span** · 07-04-2004, 17:31

ah... per quello basta scriver @import url(stile.css) tutto attaccato :tongue:

**herrel** · 07-04-2004, 17:38

Originariamente inviato da span
ah... per quello basta scriver @import url(stile.css) tutto attaccato :tongue:

infatti ho scaricato tutto e provo in locale...

**UnNamed** · 07-04-2004, 18:21

Originariamente inviato da span
con firefox è tutto sballato, se ti può servire: http://atomsurfer.altervista.org/xht...s_floating.php

spiega come fare il telaio di un layout con la proprietà float ed ottenere un risultato un po' più compatibile

Oibò, non mi ero accorto dell'errore .Ho semplificato il codice prima di postarlo (infatti il codice originale funge sia su mozilla che su opera), evidentemente devo aver fatto qualche errore. ora lo risistemo

in pratica vuoi che il div "info" sia contenuto senza uscire dal suo contenitore?

.

Proprio così, grassie.

**span** · 08-04-2004, 08:53

Originariamente inviato da UnNamed
Proprio così, grassie.

ok, allora per quello, dopo la chiusura del <div id="info">, hai del testo (che è quello che va nella colonna centrale.... alla fine di quel testo inserisci questo:

<div style="clear: both;">

dovrebbe funzionare

**herrel** · 08-04-2004, 10:38

prova:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<title>NEWBLACKHORIZONT</title>
<style type="text/css">@import url (stile.css);
html,body{
text-align: center; /*centra in IE 5.x */
margin: 0px auto;
padding: 0px;
height:100%;
}

div#container{
width: 960px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
height:100%;
}

/*blocco centrale*/
#desc{
float:left;
width:810px;
margin:0px;
height:100%;
}

/*blocco destro*/
#block{
background: url(image/blocklog.jpg) repeat-y;
width:150px;
float:right;
padding: 0px;
height:100%;
}

/*blocco interno al blocco destro*/
.box{
background:#CCCCCC url(image/block.jpg) repeat-y;
margin:10px;
border:1px solid black;
font: 10px/10px Arial,sans-serif;
}

.boxint{
margin:2px 0px 2px 4px;
font: 10px/10px Arial,sans-serif;
}

/*titolo*/
.tit{
background-color:#CC9999;
font: bold 11px Arial,sans-serif;
color:white;

}

/*footer*/
#footer{
clear:left;
text-align:center;
background-color:#666666;
font: bold 11px Arial,sans-serif;
color:white;
}

/*ulteriore blocco interno*/
#descint{
margin:10px;
background-color:#CCCCCC;
font: 12px/12px Arial,sans-serif;
border:2px solid white;
min-height: 300px;
height: auto !important;
height: 300px;
}

/*blocco interno posizionato a destra con un float*/
#info{
background: url(image/blocklog.jpg) repeat-y;
float:left;
margin:3px;
border:2px solid white;
width:170px;

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

</head>

<body bgcolor="#CCCCCC">
<div id="container">

<div id="desc">
<div id="descint">
<div class="tit" align="center">QUI</div>
<div id="info">
<div class="box" align="center">
<div class="tit">QUO</div>
[img][/img]
</div>
<div class="box">
dsfj djkfaslkjdf alksdf akj lkdfjalk dkfjaldjfk ajfkjadslkfksjdldsl kfjlkasd lkjflksd fklsdlkjfdj
kjsdòlkf jdlkjfl kfjadkf jsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald
lkadjkf aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald
lkadjkf aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald
lkadjkf aldkfja djf lsd
</div>
<div class="box">
<div class="tit">QUA</div>
sdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf aldkfja djf lsd
</div>
</div>
1234sdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf aldkfja
djf lsd sdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk

</div>
</div>
<div id="block">
<div class="box">
<div class="tit">BLA</div>
<div class="boxint">
[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

[CG] hjkljhkhlkjhk

</div>
</div>

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

Discussione: Css e proprietà float

Strumenti discussione

Ricerca discussione

Visualizza

Css e proprietà float

Permessi di invio