duda sobre meter divs en otro contenedor div

Dundee · #1 (**permalink**) 04/03/2009, 03:13

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" >

<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

jplazavidaurre · #2 (**permalink**) 04/03/2009, 04:54

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

Dundee · #3 (**permalink**) 04/03/2009, 04:58

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

jomaruro · #4 (**permalink**) 04/03/2009, 15:21

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.

baccxus · #5 (**permalink**) 04/03/2009, 17:56

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>

Dundee · #6 (**permalink**) 05/03/2009, 09:58

[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.