Comunidad de diseño web y desarrollo en internet online

posicionar con float, no crece el div contenedor

Citar            
MensajeEscrito el 04 Oct 2007 11:11 pm
Hola a todos-as
Hasta ahora usaba posición absoluta y posicionamiento por px.
pronto necesitare cambiar el contenido de un div mensualmente y cambia su longitud, con lo que empeze a provar con posiciones relativas. Mi problema es que el div contenedor tiene que crecer con el contenido de un div situado en su interior y para mi sorpresa con ie6 lo hace perfectamente, sin embargo con ff no. los div contenidos salen fuera del contnedor.

¿que es lo que hago mal ?
Gracias por vuestra ayuda.
Xavier.

pongo el codigo.
css

Código :

body {
   font-family: Comic Sans MS;
   background-color: #FFFFCC;
   font-size:16px;
   }
#contenedor {
   position:relative;
   margin:0px auto;
   background-color:#CC9933;
   text-align:center;
   width:800px;
   padding:10px;
   }
.nov1 {
   background-color:#99CCCC;
   float:left;
   width:185px;
   padding:10px;
   }
.nov2 {
   background-color:#CC6600;
   float:left;
   width:85px;
   padding:10px;
   }


html

Código :

<body>
<div id="contenedor">
  <div class="nov1">caja 1</div>
  <div class="nov2">caja 2</div>
  <div class="nov1">caja 3</div>
  <div class="nov2">caja 4</div>
  <div class="nov1">caja 5</div>
  <div class="nov2">caja 6</div>
  <div class="nov1">caja 7</div>
  <div class="nov2">caja 8</div>
  <div class="nov1">caja 9</div>
</div>
</body>

Nota: Corrección ortográfica proporcionada por el departamento del amor de Clab

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 05 Oct 2007 10:35 am

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 09 Oct 2007 07:33 pm
Hola Xavier,

Tal vez mi solución sea un poco cutre, no sé, pero yo creo que deberias usar un elemento al final con esta linea en su estilo css:

Código :

 clear:both; 


Yo he probado tu código así y funciona:
HTML:

Código :

<div id="contenedor">
  <div class="nov1">caja 1</div>
  <div class="nov2">caja 2</div>
  <div class="nov1">caja 3</div>
  <div class="nov2">caja 4</div>
  <div class="nov1">caja 5</div>
  <div class="nov2">caja 6</div>
  <div class="nov1">caja 7</div>
  <div class="nov2">caja 8</div>
  <div class="nov1">caja 9</div>
  <div class="final">&nbsp;</div>
</div>


CSS:

Código :

@charset "utf-8";
/* CSS Document */

body {
   font-family: Comic Sans MS;
   background-color: #FFFFCC;
   font-size:16px;
   }
#contenedor {
   position:relative;
   margin:0px auto;
   background-color:#CC9933;
   text-align:center;
   width:800px;
   padding:10px;
   }
.nov1 {
   background-color:#99CCCC;
   float:left;
   width:185px;
   padding:10px;
   }
.nov2 {
   background-color:#CC6600;
   float:left;
   width:85px;
   padding:10px;
   }
.final {
   clear:both;
   }


Espero que te sirva :wink:

Saludoss,

Netcy.

Por netcyberas

25 de clabLevel



Genero:Masculino  

[ Barcelona | Spain ]

firefox
Citar            
MensajeEscrito el 15 Oct 2007 10:53 pm
Hola y gracias a los-as dos . la primera en este caso no me sirvio, pero es un recurso para guardar, y la segunda funciono como yo queria. gracias y perdonar la tardanza en reponder. (problemas informaticos)
un saludo Xavier.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 16 Oct 2007 11:50 am
Considero que utilizar un elemento extra en el html, sin contenido, solo para labores de formato, va en contra de los objetivos del css. Prueba con esto:

.nov1:after, .nov2:after {
content:".";
height:1px;
display:block;
clear:both;
}

Por akhasis

75 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Oct 2007 03:45 pm
Tienes razón, akhasis, pero lamentablemente eso no funcionará con El Maligno (IE6) porque no reconoce el after.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 17 Oct 2007 09:07 am
Creo que en El Maligno los contenedores no se desbordan cuando crece su contenido, sino que crecen con el, por la inclusion de esta regla no afecta para nada a la forma en que este "navegador" renderiza la pagina, lo cual no es un problema dado que en IE ya se mostraba bien.

Por akhasis

75 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Oct 2007 09:37 pm
Hola a todos-as
Como no soy un experto en el tema, mas bien un aficionado que llava la pagina de un club social, la solucion del div vacio, ya me ha solucionado el problema y aun sabiendo que no es lo mas correcto, de momento ya me sirve. Gracias por las soluciones.

En cuanto a la socucion del after. creo que esto ya es programacion, que yo no se, pero me da la sensacion que es ponerle un punto y con este punto hace como el div vacio, lo unico que esta con el css en vez de estar en html.
estoy en lo cierto ?
un saludo Xavier.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 17 Oct 2007 09:48 pm
Hola a todos-as
En la respuesta anterior me he precipitado, ya que leyendo por aqui he dado con la solucion correcta y mas sencilla.
como tenia que ponerle un pie de pagina, pues en este div he puesto el clear:both; y todo correcto.
Gracias por vuestra ayuda.
Un saludo Xavier.

Por marxa

15 de clabLevel



 

Sabadell

mozilla
Citar            
MensajeEscrito el 18 Oct 2007 02:14 pm
En cuanto a la socucion del after. creo que esto ya es programacion, que yo no se, pero me da la sensacion que es ponerle un punto y con este punto hace como el div vacio, lo unico que esta con el css en vez de estar en html.
estoy en lo cierto ?


Cierto, con el :after lo que haces es ponerle un elemento con clear both que haga que el contenedor se expanda hasta contenerlo (y no, no seria estrictamente programacion). [/quote]

Por akhasis

75 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Oct 2007 01:57 pm
Me alegro que se te haya solucionado...

Ya lo dije la solución era un poco "cutre" pero con El Maligno tal como dice The Fricky! no funciona el elemento after....aunque aora que miro.... lo llena solo xD

Por netcyberas

25 de clabLevel



Genero:Masculino  

[ Barcelona | Spain ]

msie
Citar            
MensajeEscrito el 29 Ene 2008 09:46 pm
Hola, tengo el mismo problema y no consigo solucionarlo con el clear. El caso es q no estaba usando float realemte pero pense q se podia solucionar igual, pero q va. Si alguien puede echar un ojo al codigo y echarme una mano, por favor, pq llevo ya unos ctos dias dandole para todos los laos y no he conseguido que el me crezca con el contenido. Cierto es q se trata de un div contenedor(contanier) con el div q tiene el contenido q crece(contenido) con un div anterior donde esta la navegacion pero deberia funcionar la solucion del clear igual no?

Muchas gracias.

<?php
include("header.php");
?>
<div id="situacion"><span class="situacion">Inicio</span></div>
<div id="principal">
<div id="navegacion">
<div id="menuprin"><span class="menuprin">MENÚ PRINCIPAL</span></div>
<div id="lista">
<ul id="enlaces">
<li id="textoAct"><a href="index.php"><span class="textoAct">INICIO</span></a></li>
<li><a href="tenis.php"><span class="texto">URBASPORT-TENIS</span></a></li>
<li><a href="padel.php"><span class="texto">URBASPORT-PADEL</span></a></li>
<li><a href="pool.php"><span class="texto">URBASPORT-POOL</span></a></li>
<li><a href="parques.php"><span class="texto">PARQUES INFANTILES</span></a></li>
<li><a href="asfaltos.php"><span class="texto">ASFALTOS</span></a></li>
</ul>
</div>
</div>
<div id="contenido">
<div id="entrada"><span class="entrada">Bienvenido/a a </span></div>
<div id="texto"><span class="texto">
CONTENIDO
</div>
<div id="fotos">
<table border="0" cellspacing="10">
<tr>
<td><A HREF="tenis.php"><IMG SRC="fotos/itenis.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="padel.php"><IMG SRC="fotos/ipadel.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="pool.php"><IMG SRC="fotos/ipiscina.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="parques.php"><IMG SRC="fotos/iparques.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="asfalto.php"><IMG SRC="fotos/iasfalto.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
</tr>
</table>
</div>
<div>
MAS CONTENIDO
</div>
</div>
</div>
<div class="corte"></div>
<?
include("footer.php");
?>

En header.php abro basicamente la calse container y poco mas. En footer.php similar.

El css seria:

#container {
position: relative;
width: 1000px;
margin: 0px auto;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}

#situacion {
position: relative;
width: 954px;
height: 10px;
top: 118px;
left: 25px;
text-indent: 180px;
z-index: 1;
}

#principal {
position: relative;
width: 1000px;
min-height: 550px;;
top: 108px;
background-image: url(images/bck.gif);
overflow: hidden;
}

#contenido {
position: relative;
width: 640px;
top: -485px;
left: 210px;
background-image: url(images/bck2.gif);
background-repeat: no-repeat;
}

.corte {
clear: both;
}

Por largo74

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Ene 2008 10:39 pm

Código :

<?php
include("header.php");
?>
<div id="situacion"><span class="situacion">Inicio</span></div>
<div id="principal">
<div id="navegacion">
<div id="menuprin"><span class="menuprin">MENÚ PRINCIPAL</span></div>
<div id="lista">
<ul id="enlaces">
<li id="textoAct"><a href="index.php"><span class="textoAct">INICIO</span></a></li>
<li><a href="tenis.php"><span class="texto">URBASPORT-TENIS</span></a></li>
<li><a href="padel.php"><span class="texto">URBASPORT-PADEL</span></a></li>
<li><a href="pool.php"><span class="texto">URBASPORT-POOL</span></a></li>
<li><a href="parques.php"><span class="texto">PARQUES INFANTILES</span></a></li>
<li><a href="asfaltos.php"><span class="texto">ASFALTOS</span></a></li>
</ul>
</div>
</div>
<div id="contenido">
<div id="entrada"><span class="entrada">Bienvenido/a a </span></div>
<div id="texto"><span class="texto">
CONTENIDO
</div>
<div id="fotos">
<table border="0" cellspacing="10">
<tr>
<td><A HREF="tenis.php"><IMG SRC="fotos/itenis.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="padel.php"><IMG SRC="fotos/ipadel.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="pool.php"><IMG SRC="fotos/ipiscina.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="parques.php"><IMG SRC="fotos/iparques.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
<td><A HREF="asfalto.php"><IMG SRC="fotos/iasfalto.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>
</tr>
</table>
</div>
<div>
MAS CONTENIDO
</div>
</div>
<div class="corte"></div>
</div>
<?
include("footer.php");
?>


prueba así, el cambio te lo dejo en negrita. Es una forma pésima de corregir el problema >.<, quizás sea un problema de que especificas los altos y cuando quieres que algo se adapte al contenido necesitas que el alto lo defina el propio contenido, no tu. de todos modos si soluciona el problema ok.

Por Avaltel 2.0

22 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Ene 2008 10:40 pm
Disculpa con las prisas nada salió en negrita, el cambio es la posición del último div, para que quede dentro del contenedor.

Por Avaltel 2.0

22 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Feb 2008 08:17 pm
muchas gracias pero no me sirvio, supongo q interpretas q mi div="principal" es el contenedor y no es asi. Mi div contenedor de abre y se cierra en el header y el footer respectivamente

Es como si fuera esto:

Código :

<div id="contanier">

<div id="situacion"><span class="situacion">Inicio</span></div>

<div id="principal">

<div id="navegacion">

<div id="menuprin"><span class="menuprin">MENÚ PRINCIPAL</span></div>

<div id="lista">

<ul id="enlaces">

<li id="textoAct"><a href="index.php"><span class="textoAct">INICIO</span></a></li>

<li><a href="tenis.php"><span class="texto">URBASPORT-TENIS</span></a></li>

<li><a href="padel.php"><span class="texto">URBASPORT-PADEL</span></a></li>

<li><a href="pool.php"><span class="texto">URBASPORT-POOL</span></a></li>

<li><a href="parques.php"><span class="texto">PARQUES INFANTILES</span></a></li>

<li><a href="asfaltos.php"><span class="texto">ASFALTOS</span></a></li>

</ul>

</div>

</div>

<div id="contenido">

<div id="entrada"><span class="entrada">Bienvenido/a a </span></div>

<div id="texto"><span class="texto">

CONTENIDO

</div>

<div id="fotos">

<table border="0" cellspacing="10">

<tr>

<td><A HREF="tenis.php"><IMG SRC="fotos/itenis.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>

<td><A HREF="padel.php"><IMG SRC="fotos/ipadel.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>

<td><A HREF="pool.php"><IMG SRC="fotos/ipiscina.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>

<td><A HREF="parques.php"><IMG SRC="fotos/iparques.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>

<td><A HREF="asfalto.php"><IMG SRC="fotos/iasfalto.jpg" WIDTH="128" HEIGHT="300" BORDER="0" ALT=""></A></td>

</tr>

</table>

</div>

<div>

MAS CONTENIDO

</div>

</div>

</div> //PRINCIPAL

<div class="corte"></div>

</div> //CONTAINER


Y supuestamente el div de corte estaria en su sitio. Ahora bien, repito q no posiciono con float, lo hago todo en posiciones relativas q no se si deja de funcionar por eso. Sobre lo q dices de los height he probado a hacerlo sin ellos puestos y da igual.

He probado de todo y no termino de entender pq sencillamente no crece sin mas.

Muchas gracias de todas formas.

Por largo74

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Ago 2011 11:42 pm
Hola, probando y buscando por la web llegué una solución.

Agregar al div contenedor:

display: inline-block;

esto hizo que funcione, no entiendo bien la lógica pero funcionó.

Saludos

Por pepin80

1 de clabLevel



 

Diseñador Web

chrome
Citar            
MensajeEscrito el 21 Ago 2011 11:58 pm
otra solucion que encontré es agregar un div al final que no se verá, solo sea asi,
<div style="clear:both"></div>

Por pepin80

1 de clabLevel



 

Diseñador Web

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.