Blocchi flottanti: problema su Firefox

**crinzy** · 03-04-2007, 10:12

Ho un problema su Firefox:
in un div devo inserire 2 div uno a fianco all'altro;
il primo contiene un'immagine, il secondo del testo.

Quando il testo ha un'altezza maggiore dell'immagine, non deve scorrere sdotto di essa, questo infatti è il motivo per cui ho fatto 2 div separati e flottanti l'uno accanto all'altro.

Allego un'immagine con il comportamento corretto:
su IE 6 e 7 funziona tutto bene, su Firefox no.....can anyone help me?

il mio codice è questo:
-----------------------------------------------
<div id="contenitore">

<div id="immagine">
[img]flottami.gif[/img]
</div>

<div id="testo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, tempor in, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, tempor in, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, tempor in, mi.
</div>

</div>
-----------------------------------------------

il css applicato è questo:
-----------------------------------------------
<style type="text/css">
* {
margin:0;
padding:0;
}
#contenitore {
float:left;
width:300px;
background-color:red;
}
#immagine {
float:left;
}
#testo {
float:left;
}
</style>
-----------------------------------------------

**fcaldera** · 03-04-2007, 10:32

Se vai dal dottore porti una radiografia di una gamba sana e gli chiedi cosa non va nella gamba fratturata?

(ovvero servirebbe sapere cosa non va in firefox)

Immagino si tratti del contenitore che non contiene correttamente i due blocchi... giusto? Nel caso prova cambiando

#contenitore {
float:left;
width:300px;
background-color:red;
}

in
#contenitore {
float:left;
width:300px;
background-color:red;
height : auto;
overflow: hidden;
}

Ciao

**crinzy** · 03-04-2007, 10:35

No, il problema è che Firefox non affianca il testo all'immagine, lo posiziona sotto.

**digitos** · 03-04-2007, 22:05

Originariamente inviato da crinzy
No, il problema è che Firefox non affianca il testo all'immagine, lo posiziona sotto.

Così.
Testato su IE 5.5, 6, 7 e Firefox

codice:

 <style type="text/css">
* {margin:0;padding:0;}
img{border:none;}
#contenitore img {float:left;width:300px;background-color:red;margin-right:10px;}
#contenitore p{float:left;width:200px;}
</style>
  </head>
  <body>
  <div id="contenitore">
    [img]flottami.gif[/img]
    


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, 
    consequat eget, placerat quis, tempor in, mi. Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, 
    tempor in, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nam ligula risus, consequat eget, placerat quis, tempor in, mi.
   </div>
  <div style="clear:both"></div>
</div>

**crinzy** · 04-04-2007, 09:38

Così funziona, però io avrei bisogno di non fissare la larghezza del blocco di testo:

questo codice va in una pagina dinamica in cui l'immagine è opzionale,
quindi ci saranno anche casistiche in cui l'immagine non ci sarà
e il blocco di testo dovrà allargarsi ad occupare tutto il blocco contenitore.

Togliendo la larghezza del blocco di testo, il problema mi si ripresenta.

**digitos** · 04-04-2007, 12:27

Una cosa del genere?

codice:

   <style type="text/css">
  * {margin:0;padding:0;}
  img{border:none;}
  #wrapper{float:left;width:100%;}
  #content{margin-right:200px;}
  #immagine{float:left;width:200px;background-color:red;margin-left:-200px;}
</style>


  <div id="contenitore">
    <div id="wrapper">
    <div id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, 
    consequat eget, placerat quis, tempor in, mi. Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, 
    tempor in, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nam ligula risus, consequat eget, placerat quis, tempor in, mi.
    </div>
    </div>
    <div id="immagine">[img]flottami.gif[/img]</div>
  <div style="clear:both"></div>
</div>

**crinzy** · 04-04-2007, 12:36

mmm....purtroppo qua non funzione su nessun browser

**digitos** · 04-04-2007, 12:44

Originariamente inviato da crinzy
mmm....purtroppo qua non funzione su nessun browser

A me funziona invece sia su IE che su Firefox

il codice non è completo ovviamente. Manca l'intestazione, il footer e lo style va messo nell'head. A quello ci pensare tu

**crinzy** · 04-04-2007, 13:04

sì certo, quello è chiaro!

non so, forse perchè uso Vista, ma non credo..........grazie cmq :master:

**digitos** · 04-04-2007, 14:54

Originariamente inviato da crinzy
sì certo, quello è chiaro!

non so, forse perchè uso Vista, ma non credo..........grazie cmq :master:

Io l'ho provato su XP. Magari ho copiato malamente il codice che avevo formulato sul pc...ora però sono in ufficio e non ce l'ho più sottomano...

Discussione: Blocchi flottanti: problema su Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Blocchi flottanti: problema su Firefox

Permessi di invio