Foros del Web » Creando para Internet » CSS »

duda sobre meter divs en otro contenedor div

Estas en el tema de duda sobre meter divs en otro contenedor div en el foro de CSS en Foros del Web. Hola soy programador de php y llevo algo de tiempo usando css sinceramente sin tener un manejo total , casi siempre que maqueto tengo que ...
  #1 (permalink)  
Antiguo 04/03/2009, 03:13
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
duda sobre meter divs en otro contenedor div

Hola soy programador de php y llevo algo de tiempo usando css sinceramente sin tener un manejo total , casi siempre que maqueto tengo que dar mil vueltas para que todo quede perfectamente como quiero y sobre todo que se vea bien en explorer.
El tema es que por muchas vueltas que le doy no consigo entener porque esto no me sale , voy al grano ...
tengo esto...

<div id="content" align="center" >
<!-- contenido de la pag -->
<div id="buscador"><b>mapa<b/><br /><img src="images/buscador.png" alt="buscador" /> </div>
<div id="mapa" ><b>buscador<b/><br /><img src="images/buscador.png" alt="buscador" /> </div>
</div>

Resulta que tengo un contenedor content donde quiero que salgan dos capas más una con float left a la izq y otro con float right , el tema es que le pongo un borde a content y un fondo pero no me lo encierrra todo, es decir que no se muestra el borde alrededor de las dos capas buscador y mapa ¿porque?, ¿que hago mal ?.

y en la hoja de estilos tengo esto otro...
Código:
#content {border:#009900 4px solid; }
#buscador {float:left; padding:20px 5px}
#mapa {float:right; padding:20px 5px}
Gracias de antemano
  #2 (permalink)  
Antiguo 04/03/2009, 04:54
 
Fecha de Ingreso: diciembre-2008
Ubicación: Francia
Mensajes: 47
Antigüedad: 9 años
Puntos: 0
Respuesta: duda sobre meter divs en otro contenedor div

Hola,

Yo soy novato, pero este tutorial que está hecho para tontos te ayudará:

http://docs.google.com/Doc?id=dhs3vfzq_1258d7bmbhgv

El sistema es algo así como:

<div id="contenedor>

<div id="banner"></div>
<div id="menu"></div>
<div id="contenido"></div>
<div id="pie"></div>

</div>

Ves que el Div contenedor engloba en sus etiquetas de apertura o cierre a los demás.

LO que dices del Explorer es tremendo. La gente no entiende que es el peor navegador y el más usado. Con la versión 8 parece que todas esas gaitas se están solucionando. Pero estar una tarde trabajando y mirando en Firefox u Opera y todo OK, vas lo miras en Explorer y cada DIV por su lado es para suicidarse.

Y te recomiendo la revista "PC Cuadernos Técnicos" titulada "CSS un juego de niños" que te ayudará a entender bien el sistema de DIVs como cajas dentro de otras cajas (cuesta solo 5€ y a mi me ha abierto los ojos, valga la expresión).

Espero que mi respuesta no sea demasiado simplona para ti. Yo solo soy un aficionado.

Un saludo

Última edición por jplazavidaurre; 04/03/2009 a las 05:00
  #3 (permalink)  
Antiguo 04/03/2009, 04:58
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: duda sobre meter divs en otro contenedor div

Hola gracias por la ayuda , he leído muchos turiales de Css pero por falta de tiempo aveces se olvidan cosas y se omiten otras, de todas formas creo que tu solución es exactamente lo que yo ya hago (mirar mi primer post).

Un saludo y gracias
  #4 (permalink)  
Antiguo 04/03/2009, 15:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: duda sobre meter divs en otro contenedor div

Hola:

Añade en tu CSS lo siguiente:

Código:
#reset{clear:both;}
y en el HTML haz el siguiente cambio (marcado en rojo):

Código HTML:
<div id="content" align="center" >
<!-- contenido de la pag -->
<div id="buscador"><b>mapa<b/><br /><img src="images/buscador.png" alt="buscador" /> </div>
<div id="mapa" ><b>buscador<b/><br /><img src="images/buscador.png" alt="buscador" /> </div>
[B][COLOR="Red"]<div id="reset"></div>[/COLOR][/B]
</div> 
Espero haberte servido de ayuda.

Saludos.

  #5 (permalink)  
Antiguo 04/03/2009, 17:56
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: duda sobre meter divs en otro contenedor div

Lo primero sería esto:
Código HTML:
<div id="content" align="center" > 
Debería ser:
Código HTML:
<div id="content" > 
y en tu CSS:
Código:
#content {
margin: 0 auto;/*Centra el contenedor*/
position:relative;
border:#009900 4px solid;
}
Ahora, como tienes dos divisiones flotando no se amplía el tamaño de tu caja contenedora, para eso, la solución es no hacer flotar el div más grande (tú debes saber cual va a ser el más grande) y dejarle un margen con el tamaño de la división que quedará flotando, sería algo como esto (viste que puse el contenedor con posición relativa?)
Código:
#buscador {
float:left;
padding:20px 5px;
width: 120px;/*supongo tu dirás el valor*/
}
#mapa {
margin-left: 121px;/*Este margen es para que quepa la división que está flotando*/
padding:20px 5px;
}
Así cuando la división mapa crezca, el contenedor crecerá con ésta.

Saludos y nos avisas si algo.

PD:

Buscando en el baúl de los recuerdos encontré esto:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#contenedor{
width: 960px;
margin: 0 auto;
position: relative;
}

#header{
height: 160px;
padding: .25em;}

#lateralleft{
width: 120px;
float: left;
padding: .25em;}

#lateralright{
width: 120px;
padding: .25em;
float: right;}

#content{
width: 685px;
margin: 0 auto;
padding: .25em}

#footer{
clear: both;
height: 60px;
padding: .25em;
border-top: 1px solid #CCCCCC;}

</style>
</head>

<body>
<div id="contenedor">
  <div id="header">Encabezado</div>
  <div id="lateralleft">lateral izq.</div>
  <div id="lateralright">lateral der.</div>
  <div id="content">contenido.</div>
  <div id="footer">pie de página </div>
</div>
</body>
</html> 
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 04/03/2009 a las 18:30
  #6 (permalink)  
Antiguo 05/03/2009, 09:58
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: duda sobre meter divs en otro contenedor div

[QUOTE=jomaruro;2808786]Hola:

Añade en tu CSS lo siguiente:

Código:
#reset{clear:both;}
Ok gracias , resulta que me funcionaba pero al revisar el código algo tenía mal escrito por eso me sucedía eso , pero de todas formas el clear both no es para limpiar por derecha e izquierda , ¿que consigues haciendo eso?.

Gracias y
Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:55.