CSS posicionamiento divs

Question

Siempre soy débil cuando se trata de posicionamiento divs, pero esta situación es un poco difícil de encontrar una solución en línea. Estoy tratando de cuadros de posición así:

_ ___ _ 
|_|| ||_| 
_ | | 
|_||___| 

¿Hay una manera de evitar la definición de posiciones de pixel de cada uno específicamente y hacerlos encajar en las tres columnas que tengo?

Answer 1

eche un vistazo a este violín: http://jsfiddle.net/rREAh/ es esto lo que está buscando?

Si necesita un diseño perfecto, echar un vistazo al controlador de distribución Yahoo: http://developer.yahoo.com/yui/layout/

Answer 2

definir tres contenedores para cada columna, y flotar a la izquierda:

<div style="float:left;width:Xpx"></div> 
<div style="float:left;width:Ypx"></div> 
<div style="float:left;width:Zpx"></div> 

Ahora usted puede poner todos los contenedores en lugares apropiados en este columnas.

Answer 3

Ver:http://jsfiddle.net/qXwKT/

CSS:

.box { 
    background: #ffffff; 
    padding: 5px; 
    border: 1px solid #b3b3b3; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

#container { 
    margin: 0 auto; 
    width: 400px; 
    background: #ccc; 
    overflow: hidden 
} 
#left, #right { 
    float: left; 
    width: 75px; 
} 
#mid { 
    float: left; 
    width: 250px; 
} 
#mid .box { 
    margin: 0 10px; 
    border-color: red 
} 
#left .box { 
    margin: 0 0 10px 0; 
    border-color: blue 
} 

HTML:

<div id="container"> 
    <div id="left"> 
     <div class="box">left 1</div> 
     <div class="box">left 2</div> 
    </div> 
    <div id="mid"><div class="box">mid</div></div> 
    <div id="right"><div class="box">right</div></div> 
</div> 

Answer 4

También eche un vistazo a este: jsfiddle example que tiene un diseño fluido.

Y another one sin la div fija en la esquina inferior izquierda.