La capa contenedora se queda hasta con lo que está fuera.

[Pennywiser]

Hola! tengo un problema con mi capa contenedora. Actualmente el resultado que tengo es el siguiente:

img11.imageshack.us/img11/1466/55251109.jpg

Pero cuando añado otra nueva capa después de la capa contenedora (la blanca yy grande) ocurre lo siguiente:

img11.imageshack.us/img11/5838/91373839.jpg

El codigo del archivo php es el siguiente:

Código:

<div id="cabecera">
		<img src="cabecera.png"/>
</div>

<br/>


<div id="contenedor_botonera">
	<div id="boton" class="boton_actual">
		Principal
	</div>
	<div id="boton" class="vacio">
		Información
	</div>
	<div id="boton" class="vacio">
		Ayuda
	</div>
</div>
	
<br/>

<div id="contenedor">

	<div id='bloque' class="bloque_principal">
		Bloque uno
	</div>
	
	<div id="contenedor_detalle">
		<div id='bloque' class="bloque_detalle_izquierda">
			Bloque dos
		</div>
		<div id='bloque' class="bloque_detalle_derecha">
			Bloque tres
		</div>
		<br/>
		<div id='bloque' class="bloque_detalle_izquierda">
			Bloque dos
		</div>
		<div id='bloque' class="bloque_detalle_derecha">
			Bloque tres
		</div>
	</div>
<div class='final'/>
</div>

<div id="contenedor">
<img src='firefox.png'/>
</div>

Y el CSS es el siguiente:

Código:

html, body {
background-color: #AAFF28;
text-align:center;
padding-top: 10px;
height: 100%;
}


#cabecera{
text-align: center;
width: 700px;
margin: 0px auto;
}

#contenedor_botonera{
text-align:center;
width: 700px;
margin: 0px auto;
}

#boton{
background-color: white;
border-top: 2px solid #77B31D;
border-left: 2px solid #77B31D;
border-right: 2px solid #77B31D;
font: 12px Verdana, Arial, Helvetica, sans-serif;
margin: 0px auto;
padding-top: 2px;
padding-left: 20px;
padding-right: 20px;
height: 16px;
float: left;
position: relative;
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
}

.boton_actual{
border-bottom: 2px solid white;
}

.vacio{}

#contenedor{
text-align:center;
background-color: white;
border: 2px solid #77B31D;
width: 700px;
margin: 0px auto;
padding: 15px 30px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-topleft: 40px;
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
}

#contenedor_detalle{
border: 3px double #77B31D;
padding: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
float:left;
width:230px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#bloque{
padding: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
float:left;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}


.bloque_principal{
background-color: black;
color: white;
width: 400px;
margin-right:40px;
}

.bloque_detalle_izquierda{
background-color: #77B31D;
color: white;
width: 100px;
margin-right: 10px;
margin-bottom: 5px;
}

.bloque_detalle_derecha{
background-color: black;
color: white;
width: 100px;
}

.final{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

¿Alguna sugerencia para que la segunda capa se coloque correctamente?

[kseso?]

Sin ver cuál es cada contenedor me aventuro a comentarte:

#contenedor {padding: 15px 30px;}

le estás marcando una separación de todos sus contenidos respecto a los bordes (límites) de él.

Así que a los elementos contenidos en #contenedor que quieras neutralizar esa separación deberás darle un margen negativo para llevarlos a los bordes (límites) de él.

Por cierto, todas las propiedades que comienzan por "-moz" sólo te van a funcionar en el explorador Firefox.

Un saludo

[Pennywiser]

kseso gracias por responder, en primer lugar decirte que sólo estoy probando con la web por toquetear un poco de css, no es nada importante, por eso estoy usando para probar codigos para mozilla y safari (con webkit).

Con respecto a lo del padding, mañana probaré a ver si con este en negativo se soluciona.

Muchas gracias de nuevo

[Pennywiser]

No se ha solucionado :(

[kseso?]

Estás son tus imágenes:




¿Cuál es tu objetivo? ¿Que el contenedor con las esquinas redondeadas con la imagen de ff se ponga por debajo del que muestras en la primera pic?

Si es así, no te supe comprender antes.

1º: como "contenedor" lo usas varias veces en el mismo documento debe ser una clase (.contendor) y no tener un identificar único (#contendor)
Pero eso no influye.

Puedes añadir a #contenedor la propiedad "clear: both", también puedes crear una clase nueva en tu css:

.corte {clear: both;}

y en el html añadir

<div id="contenedor">
<!-- contenido de "contenedor"-->
</div> <!-- cierre de "#contenedor"-->
<div class="corte"></div>
<div id="contenedor">
<!-- contenido del 2º "contenedor"-->

[Pennywiser]

Gracias por subir las imágenes compañero. Si te fijas en el html, al final, dentro de la capa contenedora hay un <div class='final'/>, la clase .final hace el clear: both, pero no me lo soluciona. Te invito a que copies el css y el html y lo pruebes.

Un saludo y gracias!

[kseso?]

Lo que te ocurre es que te has olvidado de cerrar el primer #contenedor. Te "comiste" un </div> que te pongo resaltado. Añade eso y ya se irá a su lugar

<div class='final'/>
</div>
</div>
<div id="contenedor">

Un saludo

[Pennywiser]

¡Es verdad! vaya fallo...gracias por responder!

[kseso?]

Nah, no se las merecen.
El mérito fue tuyo al invitarme a copiar el código y de mi editor de código. Fue él quién me lo dijo
No se qué programa utilizas para escribir los códigos. Cualquiera medianamente bueno resalta esos despistes.

[Pennywiser]

El bloc de notas xD

[IruLaN]

Que editor de código utilizas para ver esos errores???

[kseso?]

¿yo?
El pspad editor
Creo que los hay mejores, pero yo me siento cómodo con él.