Problema Layout 3 colonne float

**Liaam** · 12-05-2008, 10:10

buongiorno a tutti!
Ieri mi sono imbattuto in uno strano "errore" durante la scrittura dell'armatura dell'ultimo sito che ho fatto.

Spiego in dettaglio.
Il sito è di 3 colonne (float) + header + footer che prende tutta la larghezza dello schermo.
Diciamo che ho fatto 3 div, leftbar, rightbar, content, esattamente in questo ordine.
il css è simile a questo

codice:

#leftbar{
width:160px;
float:left;
}

#rightbar{
width:160px;
float:right;
}

#content{}

e fin qui ci siamo.
Il problema nasce quando all'interno di content, inserisco magari in un testo, qualche tag con la proprietà "clear".
Che sia, left, right o both, questa mi manda tutta la pagina contenuta in content alla fine delle due colonne laterali.

Suggerimenti per risolvere il problema?
Grazie in anticipo!

**neorf** · 13-05-2008, 12:34

Io avevo risolto una cosa simile fancendo:

Codice PHP:


<div id="main">

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

 <div id="sidebar_sx"></div>

</div>



<div id="sidebar_dx"></div>

Quindi mettendo il main a dx e poi costruendoci dentro...
ciao

neorf

**Liaam** · 13-05-2008, 19:46

Cioè fammi capire, hai messo tutto al di fuori body?! oppure il body sarebbe l'equivalente del mio "content"?!
il main l'hai flottato a sx?
Scusa le domande ma era una soluzione alla quale proprio non avevo pensato!

**gengix** · 13-05-2008, 20:55

Questa guida ti può aiutare:

http://css.html.it/guide/lezione/75/...nne-con-float/

**neorf** · 13-05-2008, 21:01

yes, il body è il tuo content ed il main lo mandi a sx. ciao

**poser** · 13-05-2008, 21:04

Grazie delle risposte,
sulla guida ci sono da questa mattina ma non ne vengo fuori...

il codice html è tutto dentro body. ti posto il codice completo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prova</title>
<link href="stileDef.css" rel="stylesheet" type="text/css" />
</head>
<style> 
body {
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  height:100%;
}

#immg { width:45px; height:100%; float:left; position:absolute; display:block;  background-color: #FF3333} 

#menu {width:190px; height:100%; float:left; position:absolute; display:block; margin-left:45px; background-color: #FF9900} 

#header {width:100%; height:200px; float:left; position:absolute; margin-left:235px; background-color: #99CCCC; clear:left} 

#content {width:100%; height:100%; float:left; position:absolute; margin-left:235px; margin-top:200px; background-color: #FF9999; clear:left} 

#footer {width:100%; height:30px; float:left; position:absolute; margin-left:235px; bottom:0; background-color: #FF6699; clear:left} 

</style> 
<body>
<div id="immg">immg</div> 
<div id="menu">menu</div> 
<div id="header">header</div> 
<div id="content">content</div> 
<div id="footer">footer</div>
</body>
</html>

**poser** · 13-05-2008, 21:05

scusa ho sbagliato messaggio... sono fusoooooooooo

**Liaam** · 13-05-2008, 22:46

ahahah no probs!!
Domani cmq, (che ho un po' + di testa da utilizzare) faccio qualche prova con la soluzione che mi hai dato tu. Se funziona ti faccio una statua!!!

Thx!!!

Discussione: Problema Layout 3 colonne float

Strumenti discussione

Ricerca discussione

Visualizza

Problema Layout 3 colonne float

Permessi di invio