2011-06-20 8 views
6

Me gustaría que un elemento llene el espacio restante de un div principal. He logrado hacer esto, puedes verlo aquí "enlace eliminado" pero el relleno div (derecha) se encuentra debajo del div izquierdo. Básicamente quiero que el div correcto comience donde termina el div izquierdo.Complete el espacio de un div

Espero que esto tenga sentido.

<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     width:180px; 
     background-color:#ff0000; 
     height:20px; 
    } 
    #right { 
     width: 100%; 
     background-color:#00FF00; 
     height:30px; 
    } 
    </style> 
    </head> 

    <body> 
    <div> 
    <div id="left">Nav</div> 
    <div id="right">This is the space I need to fill but not go underneath the nav div</div> 
    </div> 
    </body> 
    </html> 
+0

Agregar float: derecho a #right –

+0

No creo que es posible llenar ese espacio con un ancho de 100%. La única manera de obtener el div correcto para no pasar por debajo del div izquierdo es flotar el div correcto, pero cuando lo haces, el ancho 100% hace que pase a la siguiente línea. Si elimina el ancho al 100%, se apila muy bien junto al div izquierdo, pero no se rellenará completamente. Es posible que tenga que volver a evaluar su enfoque, sería más fácil si supiera lo que estaba tratando de lograr para poder ofrecer soluciones alternativas. – Zoidberg

Respuesta

3

Conjunto margin-left: 180px; en el elemento #right. Esto lo compensará con el ancho del primer elemento.

http://jsfiddle.net/DHSej/

+0

Eso cambiará 180px de #derecho fuera del área visible que podría o no ser de interés para Mitch – Till

+0

Extremo de pierna! No puedo creer que haya pasado esto por alto. Buena esa. – Mitch

Cuestiones relacionadas