Problema con float in un layout

**carlo2002** · 29-09-2010, 16:32

A uso un layout a due colonne che permette ad un div di rimanere sempre a fondo pagina però adesso riscontro un problema che potete vedere a questo link in cui potete anche vedere il codice sorgente:

http://www.4null.net/layout_float/index.html

In pratica la colonna con il menù viene flottata a destra, nella colonna sinistra dove vanno i contenuti ho l'esigenza di mettere delle immagini che possono essere flottate sia a sinistra sia a destra e che devono avere del testo a fianco.

Logicamente se l'altezza del testo è inferiore a quella dell'immagine le altre immagini andranno a scalare appena sotto il testo quindi per separare i vari paragrafi metto un div con 'clear:both'.

Purtoppo facendo così la seconda immagine con relativo paragrafo viene allineata verticalmente al di sotto della colonna destra creando un'antiestetico spazio tra lei e la prima immagine.

Come si potrebbe risolvere ?

Grazie

**finaldayorig** · 29-09-2010, 17:27

Ciao,
prova ad invertire l'ordine nell'html.. analizzando il codice, metti prima la destra della sinistra..
Altra cosa, vedi bene margini e larghezza dei div, se provi ad analizzarlo con un qualsiasi strumeto web (firebug, f12 di ie, ctrl+shift+j di g. chrome), vedrai che la colonna di destra è praticamente contenuta nella colonna di sinistra... perciò ti fa quello scherzetto..

Spero di essere stato chiaro..

Ciao.

**Mich_** · 29-09-2010, 17:29

Bella domanda ...
Brutta risposta: non si puo` in maniera semplice.

Sarebbe semplice se le immagini (o comunque gli oggetti inseriti nel blocco dei contenuti) fossero sempre flottate dalla stessa parte (per questo hai gia` capito la soluzione).

E diventa semplice se puoi inserire dei blocchi invisibili molto bassi di larghezza 100% all'interno del blocco: esempio

codice:

<body>
  <div id="colonnamenu" style="float:right; width: ...">
    ... qui il menu ...
  </div>
  <div id="contenuti" style="float:right; width: ...">
    

 <img ... style="float:left;" />
      qui il testo</p>
    <p class="spaziatore" style="width:100%; height:1px; font-size:1px"> &amp;nbsp; </p>
    ... ecc ...
  </div>
</div>

Se invece non puoi/non vuoi inserire marcatura supplementare, la soluzione corretta e` di usare un metodo diverso per sistemare una classe di oggetti. Credo che la cosa piu` semplice sia di usare i posizionamenti assoluti per i due blocchi "colonnamenu" e "contenuti". Questo crea di solito effetti collaterali, e necessita di rivedere un po' tutto il layout, ma si dovrebbe riuscire a sistemare tutto in modo che all'apparenza non cambi nulla.

**finaldayorig** · 29-09-2010, 18:15

questa è la soluzione che ti proponevo..

Tu praticamente hai messo sulla col. sx width 700px, margin-left a 250px ...
tutto il contenitore è 980px.. poi la col dx ha width 200px e un margin di 20px..non tornavano molto..

Adesso dovrebbe...vedi un po'..
Ciao

codice:

<html> 
<head> 
<title>Prova Layout</title> 
<style> 

body {
height: 100% ;
border: 0;
margin: 0;
padding: 0;
}
 
#contenitore {
margin: 0 auto 0 auto ;
width: 980px ;
min-height: 100% ;
height: auto !important ; /* per tutti i browser */
height: 100% ; /* per IE6 */
margin-bottom: -20px ;
border: 1px solid red ;
}
 
#contenuti {
padding-bottom: 40px ;
margin: 30px 0px 0px 0px ;
width: 980px ; 
border: 1px solid red ;
}
 
#intestazione {
text-align: center ;
height: 50px ;
border: 1px solid red ;
}
 
 
#colonna_destra {
float: left ;
width: 200px ;
background-color: #ffffff ;
margin: 0px 20px 0px 0px ;
text-align: left ;
border: 1px solid red ;
}
 
#colonna_sinistra {
float:left;
width: 700 ;
margin: 0px 10px 0px 30px ;
text-align: left ;
border: 1px solid red ;
}
 
#fondo_pagina {
margin: 0 auto 0 auto ;
width: 980px ;
font-size: 12px ;
border: 1px solid red ;
text-align: center ;
}
 
.immagine_float {
float: left ;
margin: 0px 20px 10px 0px ;
}
 
.clear {
clear: both ;
height: 0 ;
padding: 0 ;
margin: 0 ;
overflow: hidden ;
}
 
</style> 
 
<body> 
 
<div id="contenitore"> 
 
<div id="intestazione">INTESTAZIONE</div> 
 
<div id="contenuti"> 
 
 
<div id="colonna_sinistra"> 
 
[img]immagine.jpg[/img] 


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> 
<div class="clear"></div> 
 
[img]immagine.jpg[/img] 


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> 
<div class="clear"></div> 
 
[img]immagine.jpg[/img] 


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> 
<div class="clear"></div> 
 
</div> 
<div id="colonna_destra"> 
 
<ul>[*]Link 1[*]Link 2[*]Link 3[*]Link 4[*]Link 5[*]Link 6[*]Link 7[*]Link 8[*]Link 9[*]Link 10[/list]
 
</div> 
<div class="clear"></div>
 
</div> 
 
</div> 
<div class="clear"></div>
 
<div id="fondo_pagina">FONDO PAGINA</div> 
 
 
</body> 
 
</html>

Chiedo scusa se il messaggio è lungo, ma non so come inviare files, tanto meno se è possibile mettere link che rimandano a file esterni.

Nel caso potete eliminare l'eccedenza.

**carlo2002** · 29-09-2010, 20:05

http://www.4null.net/layout_float/index.html

F U N - Z I O - N A ! ! ! !

Sei stato gentilissimo, ti ringrazio davvero tanto

Grazie anche a Mich_ per il suo intervento

Saluti

**finaldayorig** · 29-09-2010, 23:27

Figurati, mi fa piacere

Discussione: Problema con float in un layout

Strumenti discussione

Ricerca discussione

Visualizza

Problema con float in un layout

Permessi di invio