CSS. Problemas con float
Esa la banda.
Pues con una duda que me está quitando el sueño.
Código HTML
<code><CONTENIDO>
<div>
<div>
<h1><span>Appetizers</span></h1>
</div>
<div>
<ul>
<li><a href="#">JACK DANIEL'S <br>GRILL &amp; MORE</a></li>
<li><a href="#">STEAKHOUSE <br>SELECTS</a></li>
<li><a href="#">SOUPS<br> &amp; PASTAS</a></li>
<li><a href="#">CHICKEN <br>&amp; SEAFOOD</a></li>
<li><a href="#">BURGERS &amp;<br> SANDWICHES</a></li>
<li><a href="#">SALADS</a></li>
<li><a href="#">DESSERTS</a></li>
</ul>
</div>
<div>
<div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
</div>
<div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
</div>
</div>
</div></code>
Código CSS
<code>#colum_izq {
width: 350px;
margin: 10px 50px;
float: left;
background-color: #FFFFFF;
}
#colum_der {
width: 350px;
margin: 10px 50px;
float: right;
background-color: #FFFFFF;
}
</code>
Estoy ajustando la página de un template que me dieron y es en esta parte donde se descompone todo, porque cuando dejo activa la propiedad float en ambos DIV, sucede lo siguiente:
http://www.keittostudio.com.mx/extras/1.jpg
Cuando debería verse completo el fondo blanco hasta cerrar el marco.
http://www.keittostudio.com.mx/extras/2.jpg
Ojalá me puedan ayudar para saber en qué estoy mal.
keitto
Pues efectivamente, era un problema de altura en el contenedor de las columnas y también anidamiento de DIVs.
Y también puse el código HTML que no era, así iba a estar más difícil, ¿verdad?
Al final, quité unos cuantos DIVs, incluyendo aquellos de las columnas;
http://keittostudio.com.mx/tgif/pages/
Gracias.
Si tengo más dudas, vendré a preguntar, jojojo.
albatros
Espero haberte entendido mas o menos es esto?
he tenido quitar los comienzos y cierres de las etiquetas que llevan el id por que no salian espero q te valga asi
me cuentas un saludo
<style>
body {margin:0; background-color:#CC0000}
#colum_izq {
width: 350px;
margin: 0px 50px;
float: left;
background-color: #FFFFFF;
}
#colum_der {
width: 350px;
margin: 10px 50px;
float: right;
background-color: #FFFFFF;
}
ul { margin:0; background:#000; width:650px; float:left }
ul li { list-style:none; display:inline; border:1px solid #ccc; float:left; margin-right:5px; background:#ccc }
#contenedor { background:#fff; float:left; width:690px}
#contenedor-general { background:#fff; border:4px solid #000; float:left; width:690px; margin:5px}
</style>
</head>
<body>
<CONTENIDO>
div id="contenedor-general"
<div>
<h1><span>Appetizers</span></h1>
</div>
<div>
<ul>
<li><a href="#">JACK DANIEL'S <br>GRILL &amp; MORE</a></li>
<li><a href="#">STEAKHOUSE <br>SELECTS</a></li>
<li><a href="#">SOUPS<br> &amp; PASTAS</a></li>
<li><a href="#">CHICKEN <br>&amp; SEAFOOD</a></li>
<li><a href="#">BURGERS &amp;<br> SANDWICHES</a></li>
<li><a href="#">SALADS</a></li>
<li><a href="#">DESSERTS</a></li>
</ul>
</div>
div id="contenedor"
div id="colum_izq"
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
<div>
<h2><span>Buffalo Wings</span></h2>
<h3>Alitas B&uacute;falo</h3>
<img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img">
<p>Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&ntilde;adas de aderezo Roquefort y apios.</p>
</div>
</div>
</div>
</div>
</body>
</html>
viroc
A simple vista parece más bien un problema de altura en el contenedor de las columnas, pero como te dicen por ahí no se especifican los div que pertenecen a las columnas.
marcapaginas
EDITO: no, acabo de mirar mejor y no era eso xD sorry
kemie
hola! :)
tienes un link a la pagina? que en tu codigo no especificas cual es colum_izq y colum_der