Div interno no empuja a otro div, no puede aclararse: ambos; trabajar

Tengo algunos problemas con

s. El

interno (contenido div) no empujará el

externo (wrap_content).

Déjame publicar el código para que puedas ver lo que podría estar mal.

style.css

 * { padding: 0px; margin: 0px; } body { background: #e2e2e2; color: #f2f2f2; font-family: Arial; } #wrap_design { width: 1139px; } #wrap_content { float: right; max-width: 963px; height: 100%; border-right: 8px solid #2d2828; border-left: 8px solid #2d2828; border-bottom: 8px solid #2d2828; padding-bottom: 10px; } #header { height: 236px; width: 963px; background-color: #2d2828; } #headerimg{ z-index: 1; margin-left: -26px; } #loggedin_box { min-height: 230px; width: 160px; background: #2d2828; float: left; margin-top: 236px; position: static; padding-bottom: 5px; } #loggedin_box_green { height: 30px: width: 150px; background: #73aa09; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; letter-spacing: 2px; } #loggedin_box ul { border: none; } #loggedin_box ul li { list-style: none; text-align: left; } #loggedin_box ul li a { font-family: Arial; font-size: 14px; color: #b1b2b2; text-decoration: none; padding-left: 5px; } #menu_container { margin: 0px 0px 0px 0px; background: #2d2828; font-family: Arial; width: 100%; margin: 0px auto; height: 65px; } #content { color: black; vertical-align: top; height: 100%; margin-bottom: 10px; clear: both; } #content-sidebar { border-left: 2px solid #2d2828; float: right; width: 285px; max-width: 285px; height: 100%; } 

index.php

         

Hay una parte del código de index.php que no publiqué porque espero que no lo necesites 🙂

¡Realmente espero que alguien pueda ayudarme! PD. He hecho algunas investigaciones en Internet, y aprendí que debería usar clear: both; pero realmente no puedo hacer que funcione.

Elimine la height: 100% de su #wrap_content style (está causando problemas), y luego para asegurarse de que se ajusta a los elementos flotantes, agregue ancho y desbordamiento como lo siguiente:

 #wrap_content { float: right; max-width: 963px; border-right: 8px solid #2d2828; border-left: 8px solid #2d2828; border-bottom: 8px solid #2d2828; padding-bottom: 10px; width: auto; /* Must use this for overflow to do what you want */ overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */ } 

Solo como una pequeña nota, hay una buena cantidad de CSS innecesarios sucediendo allí. Le animo a que lo revise cuidadosamente y lo modifique / elimine. Podrías hacer lo que buscas con la mitad de la cantidad de CSS.

ELIMINE toda la “altura: 100%;” en todas partes, si no hace lo que crees que hace.

Sugeriría eliminar su CENTRO y hacer que su #wrap_design sea así:

  #wrap_design { margin: 0 auto; width: 1139px; } 

Esto centrará su envoltorio. Recomiendo enfáticamente que no se CENTRE. Si desea cambiar el margen superior de este contenedor (es decir, 20px desde arriba y abajo), haga este margen: 20px auto ;.

No necesita usar clear: both; necesariamente. En un contenedor de un flotador (o flotadores múltiples) puede colocar overflow: hidden (mismo efecto) y no se necesita ningún marcado adicional:

   
this will float left
this will float left

Si no tenía el “desbordamiento: oculto” en este ejemplo, no vería el color de fondo “#CCC” en el .container.

Esto es lo mismo que hacer una manera clara (pero nuevamente arriba es mejor porque hay menos marcado):

  
this will float left
this will float left

El método claro es bueno en un caso como este (cuando quiere un niño “fuera del padre”):

   
this will float left
this will float left

Pero, de nuevo, no recomendaría ese marcado, si su diseño puede ser diferente, también puede usar clear como este:

   
this will float left
this will float left
this is full sized

Si sigues estos ejemplos, deberías resolver tu problema 🙂