3 div inline + float left +width in percentuale

**user0** · 08-01-2011, 01:16

salve ragazzi,

ho sperimentato diversi modi per mettere 3 box "nella stessa riga"

sia con <span> che con <div style="display:inline;"> non posso settare la larghezza dei box.

L'unica soluzione mi sembra usare div + il css float: left;

quindi ho usato questo codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
      <title>prova</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">div{border:1px solid black; width:33%; text-align:center;}
.container{background: white; width:90%; border:1px solid black; margin:0 auto;}
</style>
</head>

<body>
<div class="container">
   <div style="float: left;" >div float1</div>
     <div style="float: left;" >div float2</div>
     <div style="float: left;" >div float3</div>  
</div>
</body>
</html>

che funziona quasi perfettamente con internet explorer 7(lo so, sono shoccato pure io

) mentre sia con firefox sia con opera i 3 div vengono visualizzati fuori dal container. Dove sbaglio??

grazie

**user0** · 08-01-2011, 11:01

ragazzi help!

**tesfix** · 08-01-2011, 13:40

Ciao,
hai provato ad impostare delle width ai div?

**user0** · 08-01-2011, 13:57

Originariamente inviato da tesfix
Ciao,
hai provato ad impostare delle width ai div?

si, come puoi vedere dal codice postato (guarda l'head)

div{border:1px solid black; width:33%; text-align:center;}

**tesfix** · 08-01-2011, 14:11

Aggiungi questo dopo il trezo div float prima della chiusura del container.

<div style="clear:both;"></div>

Così dovresti risolvere..-

Ciao

**user0** · 08-01-2011, 14:31

ok, ho pulito un po il codice...

cosi va bene?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
      <title>prova</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
      .divfloat{border:1px solid black; width:33%; text-align:center;}
      .container{background: white; width:90%; border:1px solid black; margin:0 auto;}
      .divfloat{float: left; border:1px solid black; width: 33%;}
      .contenitore-3box{width:50%; border: 1px solid red;}
</style>
</head>

<body>
<div class="container">
     <div class="contenitore-3box">
          <div class="divfloat" >div float1</div>
          <div class="divfloat" >div float2</div>
          <div class="divfloat" >div float3</div>
          <div style="clear:both;"></div>
     </div>
</div>
</body>
</html>

in pratica si deve creare un contenitore fittizio..

EDIT: sembra funzionare solo che rimane un po di spazio tra il terzo divfloat e il contenitore dei divfloat. Sicuramente perchè ho impostato width:33% nel css dei divfloat, vero?

PS: grazie per l'aiuto

Discussione: 3 div inline + float left +width in percentuale

Strumenti discussione

Ricerca discussione

Visualizza

3 div inline + float left +width in percentuale

float

Re: float

Aggiungi un clear

Permessi di invio