CSS 3 flotante de columna (2 fijo, 1 dinámico)

Estoy diseñando un encabezado que está hecho de 3 partes. tamaño min-width:940px; max-width:1200px;CSS 3 flotante de columna (2 fijo, 1 dinámico)

Las dos primeras partes de la cabecera se fijarán::

La página debe ser fluida

left  middle  right 
<---------><---------><-----------------> 
    134px  183px  (Fill the remaining space)

me gustaría la parte derecha de cambiar en función del tamaño de la página , Pegaré lo que tengo hasta ahora, pero mi problema es hacer que llene completamente la brecha.

HTML:

<div class="main"> 

<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div>

CSS:

.main{ 
     margin:auto; 
     min-width:940px; 
     max-width:1200px; 
     background-color:#000; 
    } 

    .left{ 
    float: left; 
    width: 134px; 
    height: 191px; 
    background-color:#0000ff; 
    } 
    .middle{ 
    float: left; 
    width: 183px; 
    height: 191px; 
    background-color:#ffff00; 
    } 

    .right{ 
    float: left; 
    width: 60%; 
    height: 191px; 
    background-color:#ff0000; 
    }

Fuente

2009-07-18 Anonymous

¿Completa el espacio en el encabezado o en el resto de la página? – random

Prueba esto:

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { float: left; width: 183px; height: 191px; background-color:#ffff00; } 
div.right { height: 191px; background-color: #ff0000; margin-left: 317px; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 
</div> 
</body> 
</html>

Fuente

2009-07-18 10:45:39 cletus

lugar, muchas gracias! –

Codepen: http://codepen.io/clouddueling/pen/wyIcC –

no tengo la reputación suficiente para comentar, pero sólo quería para respaldar la corrección de la respuesta anterior Yo estaba buscando algo un poco diferente: fijo-líquido fijo, por lo ajustado de la siguiente manera:

<html> 
<head> 
<title>Three columns</title> 
<style type="text/css"> 
div.main { background-color: #000; } 
div.left { float: left; width: 134px; height: 191px; background-color:#0000ff; } 
div.middle { height: 191px; background-color: #ff0000; margin-left: 134px; margin-right: 183px;} 
div.right { float: right; width: 183px; height: 191px; background-color:#ffff00; } 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="middle"></div> 
</div> 
</body> 
</html>

puntos clave de aviso: - márgenes, con el flotador, se utilizan para evitar que el cuerpo se solapan con los bordes. - en mi caso, debe invertir el orden de los divs en el html - en realidad no necesita un div para el "medio". Un sitio que no tiene es el blog quirksmode (simplemente establece los márgenes directamente en el elemento "cuerpo"): http://www.quirksmode.org/blog/archives/browsers/index.html

Fuente

2010-10-19 05:29:32

CSS 3 flotante de columna (2 fijo, 1 dinámico)

Respuesta

Cuestiones relacionadas