Comunidad de diseño web y desarrollo en internet online

Ajustar un div al height del div que lo contiene

Citar            
MensajeEscrito el 06 Feb 2010 01:14 pm
Buenas,
Tengo 4 divs, el primero "contenido", es un div con width 100% y height auto, y esta para permitir que mi segundo div ("interior") contenido dentro de él este centrado.
Dentro de interior están, un div "menu" flotado a la izquierda y un div "contenedor" flotado a la derecha , bueno y un tercero "clearfix" con la propiedad clear:both para que el div interior se ajuste bien a ellos.
Mi problema es que el div menu esta casi vacio, y quiero que se ajuste en altura al div "interior" conforme aumenta el div "contenedor".

a ver pongo el código:



Código HTML :

<div id="contenido"> 
   <div id="interior"> 
       <div id="menu">        </div>  
       <!-- Fin de menu --> 
         
        <div id="contenedor"> 
             
        </div> <!-- Fin de contenedor --> 
         
        <div class="clearfix">        </div> <!-- Fin de clearfix"--> 
    </div>  
   <!-- Fin de Interior --> 
</div><!-- Fin de contenido --> 




y el css:



Código :

div#contenido {
   width:100%;
}

div#contenido div#interior {
   
   width:900px;
   height:auto;
   margin-left:auto;
   margin-right:auto;
   border-bottom:solid 12px #00FF66;
}

div#contenido div#interior div#menu {
   width:200px;
   height:auto;
   float:left;
   background-color:#CC3300;
}

div#contenido div#interior div#contenedor {
   position:relative;
   width:700px;
   height:auto;
   float:right;
}

div.clearfix {
   clear:both;
}




es para que el color de fondo (o imagen) del div menu se mantenga hasta el final de la página.
La verdad no se si me he explicado, en mi cabeza suena bien pero quizás me he enrollado demasiado jeje.

Por elessarm

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Feb 2010 02:23 pm
Creo que lo que necesitas es lo conocido como falsas columnas o columnas equilibradas. Busca por esos términos, hay mucha información/ejemplos en la red, así como distintas técnicas. Todo depende de cuál se ajuste mejor a tus necesidades.
Aquí tres formas distintas para lograr lo mismo:
1º ejemplo
2º ejemplo
3º ejemplo

Otra forma sería simularlo creando una imagen para el body repetida verticalmente y que sea la que cree la ilusión de las 2 columnas.

Bueno, elije una de las anteriores y si encuentras alguna dificultad en aplicarla seguro que alguien te echa una mano.

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Feb 2010 03:19 pm
Gracias es justo lo que buscaba. Pensaba que habría una solución más sencilla pero ese es el efecto que quería conseguir.

Por elessarm

1 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.