Problema con cajas dinámicas verticalmente y dos columnas en CSS
Hola una vez mas.
Tengo un problema con este codigo. En IE se ve bien, y en firefox tambien peero, en cuanto aplico los estilos de las columnas 1 y 2, el color de fondo desaparece. Estoy usando mal esta tecnica o es que es otro problema mas de los navegadores? si quiero aplicar mas de una columna sucede eso que les menciono.
Prueben en ie, y luego en firefox y ven a lo que me refiero por si no quedo claro.
gracias
.contenido {
background: url(../imagenes/pie/seccion1.png) no-repeat bottom left;
float:left;
width:600px;
}
.contenido .parte-superior {
width: 600px;
padding:16px 0 67px 0;
background: url(../imagenes/seccion1top.png) no-repeat;
}
.contenido .parte-superior .parte-centro{
width: 594px;
border-left:3px solid #FFF;
border-right:3px solid #FFF;
background-color: #d7e5b6;
}
#columna1 {float:left; width:250px;}
#columna2 {float:left; width:250px;}
<div class="contenido">
<div class="parte-superior">
<p>cabecera seccion</p>
<div class="parte-centro">
<div>
<h1>Presentación:</h1>
<p>Bienvenid@.</p>
<p>Columna 1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Columna 2.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!--fin parte-cento -->
</div>
<!--fin parte-superior -->
</div><!--fin contenido -->
yosoyraro
Puedes poner la url de la página?
Santiago.meneses
No entiendo bien
las columnas a que te refieres son las que pone columna1 y columna2??
por que estan dento de una etiqueta <p>, no deberían estar mejor en una etiqueta </p><div>?
y por que le pones a las dos columnas float:left? solo tendrías que ponerselo a la columna de la izquierda, la otra ya flotaría con respecto a esta.
de todos modos explicate un poco mejor e intentaremos ayudarte en lo que podamos.
Un saludo.</div>
Chris
Hola. No tengo la web aun colgada, sería mas facil la verdad.
Por que p en vez de div? por prisas podria decir, pero al caso, el resultado es el mismo para ilustrar el problema. Eran parrafos pero queria poner dos columnas, y por no llenar con tanto div, pues supongo que haria eso, pero tampoco tengo demasiada experiencia en el campo y puede que esa sea tambien una de las causas, lo siento.
Intentare explicarlo de otra manera, (y espero no liarlo mas, asi que disculpen):
Tengo una parte de una web que podria llamar caja, en la que se muestra un texto.
Dicha caja tiene las esquinas redondas por lo que he usado unas imagenes que van en la parte alta y baja (como si fuesen las tapas de pan de una hamburguesa) y un area intermedia que es los que varia en la vertical hacia abajo en funcion de su contenido, vamos, que crece, bien.
Ese espacio intermedio entre la parte alta de la caja y la baja, debe llevar un color de fondo que impide ver el limite con sus extremos en lo alto y bajo. Vale, pues funciona perfectamente si le pongo de contenido lo que sea, tanto <p> </p><div> como otros elementos, pero solo si estan apilados uno sobre otro, es decir, en una sola columna.
Si floto alguno de esos elementos, el que sea, tanto a la izda como a la derecha para que se quede a dos columnas ese contenido, el color de fondo (en este caso) o la imagen que ponga para que rellene ese espacio donde va el contenido, desaparece en firefox, no en IE.
Disculpen no tener esto colgado para verlo al vuelo. Espero que ahora quede mas claro, gacias otra vez</div>
kemie
Chris, esto es normal. Cuando un elemento flota, se sale del flujo del documento, es decir, no ocupa espacio en su contenedor (como si estuviera, literalmente, flotando). Por lo tanto el contenedor no se expande a todo lo alto de los elementos flotados. IE6 interpreta mal esto, pero eso es otro rollo.
La solucion
-poner un elemento con clear:both al final de tu contenedor
-flotar tu elemento contenedor
-dar a tu contenedor overflow:auto
-usar este hack clearfix http://www.positioniseverything.net/easyclearing.html
Chris
Gracias Kemie.
Una ultima cosa al respecto:
Usar un div por parte (superior, inferior, intermedia, mas una que contenga todo lo que se quiera introducir como info) es abusar de divs?.
Que hay de malo en usar este metodo?:
<div> <!-- contenedor-->
<div></div> <!-- Aqui iria el encabezado.png de la caja -->
<div> <!-- centro-->
<div> <!-- infowrapper -->
<h1>Titulo seccion</h1>
<div> <p>Las Islas Canarias no son tierras emergidas</p> </div> <!-- columna1-->
<div> <p>Que las Islas Canarias no son tierras emergidas!</p> </div> <!-- columna2-->
</div> <!-- fin infowrapper -->
</div> <!-- fin centro-->
<div></div> ><!-- Aqui iria el pie.png de la caja -->
</div><!-- fin contenedor-->
Muchas gracias por responder.
saludos