Posizionare 3 div in un div contenitore

lunedì 15 aprile 2013 - 11.16
Tag Elenco Tags  VB.NET  |  .NET 4.0  |  Visual Studio 2010  |  Javascript  |  CSS 2.1

trinity Profilo | Guru

Buongiorno,

ho un problema di posizionare attraverso i css 3 div in un div contenitore...se vedete l'immagine che ho allegato ho disegnato il risultato finale di come devono essere posizionati i div...
Sto utilizzando la proprietà position:relative ed ecco il mio codice:


.contenitore { background-repeat: no-repeat; width: 1024px; height: 675px; font-family: Verdana; font-size: small; margin: 0px auto; border: 0px; } .divalto { width: 660px; height: 35px; top: 10px; left: 10px; position:relative; text-align:center; border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; } .divsinistra { width: 223px; height: 500px; top: 40px; left: 10px; position:relative; border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; font-family: Verdana; font-size: small; margin: 0px auto; } .div destra { width: 760px; height: 500px; top:40px; left: 230px; position:relative; border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; margin: 0px auto; }


ma mi sballa tutto ossia il div superiore lo posiziono perfettamente, quello verticale di sinistra mi esce sempre al centro...quello di destra viene messo in basso...
Dove sbaglio?
Cirillo Fabio
www.trycontact.com
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

mexico77 Profilo | Junior Member

Non vedo l'allegato.
www.setteweb.it

trinity Profilo | Guru

Cavolo hai ragione ho scritto il post e mi sono dimenticato di allegare l'immagine..eccola:


711x465 27Kb


Ciao
Cirillo Fabio
www.trycontact.com
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

mexico77 Profilo | Junior Member

Allora devi avere un box contenitore (Container) e 3 Box interni (Head; Colsx; Corpo;)

Quindi :
.container { width: 1024px; O in %}
.Head { witdh: o come il container o minore e poi stabilisci i margini; float:left;}
.colsx{widht: 200px; o %; float:left; ed eventuali marigini}
.corpo{widht: 824px; o %; float:left; ed eventuali marigini}

l'html sarà:

<div class"container">
<div class"head">Head</div>
<div class"colsx">Col sx</div>
<div class"corpo">Corpo</div>
</div>

www.setteweb.it
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5