Tres columnas, la del medio centrada

albert84 · #1 (**permalink**) 18/03/2013, 10:03

Hola

Estoy haciendo pruebas y no consigo resolver lo que quiero hacer.

Quiero tener tres columnas, una en la izquierda, otra en la derecha, y la del medio centrada entre las dos, y a medida que escale la pagina se espacien o contraigan.

Tengo el siguiento codigo:

Código:

<!DOCTYPE html>
<html>
<head>
  <link href="estilo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="main">
    	<div id="left" class="column"></div>
        <div id="center" class="column"></div>
        <div id="right" class="column"></div>
    </div>
</body>
</html>

CSS

Código:

.column{
	width: 200px;
	height: 400px;
}
#left{
	background-color:#F00;
	float: left;
}
#center{
	background-color:#0F0;
	float: left;
	margin: 0 auto;
}
#right{
	background-color:#00F;
	float: right;
}

Me podéis ayudar a conseguir este efecto,

muchas gracias!

pitufoweb · #2 (**permalink**) 18/03/2013, 10:32

Hola,

Usa porcentajes para las medidas.

Ejemplo:

.column{width:30%;}

Saludos

albert84 · #3 (**permalink**) 18/03/2013, 10:37

Gracias por contestar, lo he probado y no me sirve, lo que quiero espaciar o contraer es el espacio entre medio, las columnas no.

El problema es centrar la columna de el medio, respecto a las otras dos.

Gracias

falconeta8 · #4 (**permalink**) 18/03/2013, 10:49

Así...

Código CSS:

Ver original.wrapper{
   width: 72%;
   margin: 0 auto;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.wrapmiddle{
   float: left;
   width: 100%;
   background-color: #fff
}
.middle{
   margin-right:221px;
   margin-left:221px;
   background-color: #afeeee;
   height: 200px;
}
.left{
   float: left;
   width: 201px;
   margin-left: -100%;
   background-color: #cfcfcf;
   height: 200px;
}
.right{
   float: left;
   width: 201px;
   margin-left: -201px;
   background-color: #cfcfcf;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

Código HTML:

Ver original<div class="wrapper">
    <div class="header">
             header
    </div> 
    <div class="wrapmiddle">      
        <div class="middle">
            middle
        </div>
    </div>
        <div class="left">
            left
        </div>      
        <div class="right">
            right
        </div> 
        <div class="footer">
            footer
        </div>     
</div>

albert84 · #5 (**permalink**) 18/03/2013, 11:30

Muchas gracias!

Es lo que buscaba