Foro de Programación Cliente

CSS. Problemas con float

  el 25.09.2008 a las 23:36 por keitto · 5 comentarios

5 seguidores

Esa la banda.

Pues con una duda que me está quitando el sueño.

Código HTML

<code>&lt;CONTENIDO&gt;
&lt;div&gt;
&lt;div&gt;
&lt;h1&gt;&lt;span&gt;Appetizers&lt;/span&gt;&lt;/h1&gt;
&lt;/div&gt;

&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;JACK DANIEL'S &lt;br&gt;GRILL &amp;amp; MORE&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;STEAKHOUSE &lt;br&gt;SELECTS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;SOUPS&lt;br&gt; &amp;amp; PASTAS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;CHICKEN &lt;br&gt;&amp;amp; SEAFOOD&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;BURGERS &amp;amp;&lt;br&gt; SANDWICHES&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;SALADS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;DESSERTS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div&gt;

&lt;div&gt;
&lt;div&gt;
&lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
&lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
&lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
&lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
&lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
&lt;div&gt;
&lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
&lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
&lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
&lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
&lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;</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.

5 comentarios Ir al último comentario

  • keitto

      el 26.09.2008 a las 21:02
    Víctor Gerardo Hernández Arriaga

    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

      el 26.09.2008 a las 13:31
    Nicolas Carrera

    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

    &lt;style&gt;

    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}
    &lt;/style&gt;

    &lt;/head&gt;

    &lt;body&gt;
    &lt;CONTENIDO&gt;
    div id="contenedor-general"
    &lt;div&gt;
    &lt;h1&gt;&lt;span&gt;Appetizers&lt;/span&gt;&lt;/h1&gt;
    &lt;/div&gt;

    &lt;div&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;JACK DANIEL'S &lt;br&gt;GRILL &amp;amp; MORE&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;STEAKHOUSE &lt;br&gt;SELECTS&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;SOUPS&lt;br&gt; &amp;amp; PASTAS&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;CHICKEN &lt;br&gt;&amp;amp; SEAFOOD&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;BURGERS &amp;amp;&lt;br&gt; SANDWICHES&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;SALADS&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;DESSERTS&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    div id="contenedor"

    div id="colum_izq"
    &lt;div&gt;
    &lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
    &lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
    &lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
    &lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
    &lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
    &lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
    &lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
    &lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div&gt;
    &lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
    &lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
    &lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
    &lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
    &lt;h2&gt;&lt;span&gt;Buffalo Wings&lt;/span&gt;&lt;/h2&gt;
    &lt;h3&gt;Alitas B&amp;uacute;falo&lt;/h3&gt;
    &lt;img src="../images/secciones/appetizers/buffwings.jpg" class="platillo_img"&gt;
    &lt;p&gt;Alitas de pollo marinadas, fritas y doradas, ligeramente picantes; acompa&amp;ntilde;adas de aderezo Roquefort y apios.&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;/div&gt;

    &lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;

  • viroc

      el 26.09.2008 a las 10:42
    Víctor Rosa Carrasco

    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

      el 26.09.2008 a las 09:42
    marcapaginas

    EDITO: no, acabo de mirar mejor y no era eso xD sorry

  • kemie

      el 26.09.2008 a las 09:27
    Kemie Guaida

    hola! :)
    tienes un link a la pagina? que en tu codigo no especificas cual es colum_izq y colum_der

Entra o únete Gratis para comentar

Seguro que tienes mucho que decir, te estamos esperando.

Entra Únete Gratis

Volver arriba