div con dos columnas

NeB1

Hola buenas,

Tengo 1 div contenedor y dentro dos divs que simulan una columna derecha y una izquierda, pero si a los divs de dentro les pongo float:right y float:left respectivamente, entonces el div contenedor pasa a tener un height de 0, y me interesa que el div contenedor crezca a medida que crecen las dos columnas. any ideas??

Khanser

ponle al div derecho un margin-left del tamaño del ancho del div izquierdo y unicamente float:left al izquierdo XDD es chapu pero bueno :3

BourneJason

Deberás ponerle tanto al div de la izquierda como al de la derecha "float: left"; pero te toparás con un problema muy común y es que no crece el contenedor. Si añades al contenedor "display: table;" verás que se soluciona el problema.

Un saludo.

yEnS

Hay distintas formas de solucionar lo que comentas, cada una con sus pros y sus contras.

Te dejo una solución rápida y efectiva mientras no desarrollas las tuyas propias:

<div>
<div style="float:left;">hola izquierda</div>
<div style="float:right;">hola derecha</div>
<br>
</div>

Con el clear provocas que se "limpie" o "cierre" el flujo de floats en el contenedor. Si puedes, instálate el firebug y te miras bien por Facebook otras técnicas un poquito más avanzadas que usan, pero esa te funciona. Pero ya se sabe, en CSS puede haber distintas soluciones al mismo problema, simplemente usa la que mejor entiendas o te vaya.

Crawler

ponle "overflow:auto" al div contenedor.
http://www.planseldon.com/blog/hasta-siempre-clearboth/

bLaKnI

#5. Aunque yo pondria overflow: hidden;

O un footer con clear:both.

Crawler

también.. ;)

NeB1

jejeje, gracias xD

GamA

Siempre puedes forzar a que tenga una altura mínima:

min-height:X;

De todas formas yo solía usar clear:both, pero veo que el overflow puede estar más interesante. Habrá que mirarlo :)

SiCk

#5 Puto amo el del link explicando los float con una caja de ducados y unos cds xD

Usuarios habituales

  • GamA
  • NeB1
  • Crawler
  • bLaKnI
  • yEnS
  • BourneJason
  • Khanser