como puedo poner en la misma linea tres capas div...

[roboty]

Hola, lo que estoy intentado es poner tres capas div que encajen en la capa div contenedor, yo hice algo asin, pero solo me lo ajusta horizontalmente yo lo quiero tambien verticalmente, alguna ayuda, muestro el codigo saludos.

Código CSS:

<style type='text/css'>
        .central{
            background-color:blue;
            width:60%;
            margin:0px 0px 0px 20%;
        }
        .izquierdo{
            background-color:red;
            width:20%;
            margin:0px 0px 0px 80%;
        }
        .derecho{
            background-color:green;
            width:20%;
            margin:0px 0px 0px 0px;
        }
        .contenedor{
            background-color:rgb(000,100,100);
            width:80%;
            margin:auto;
        }
    </style>
 

Código HTML:

<div class='contenedor'>
<div class='central'><p>central</p></div>
<div class='izquierdo'><p>izquierdo</p></div>
<div class='derecho'><p>derecho</p></div>
</div>
 

[cristian_cena]

Para crear las columnas:

Código CSS:

.contenedor{ 
overflow:hidden 
/* ... tus estilos ...*/
}
 
.contenedor div{
float:left;
}
 

la regla es que la suma de los anchos totales (width +border + padding + margin) de todas las columnas no supere al width del contenedor. De lo contrario el contenido que no quepa se presentará en una nueva línea abajo descuadrándose tu maqueta.

Iniciado por roboty

pero solo me lo ajusta horizontalmente yo lo quiero tambien verticalmente

No se bien a que te refieres pero podes googlear por "columnas de igual alto css", hay varias soluciones: una es dar un fondo con repeat-y al contenedor, otra es usar display:table ie8+, otra es igualar los height con javascript.

Saludos

[roboty]

Hola cristian_cena, no entendi muy bien tu respuesta, yo lo que intento es que las tres capas div con su parrafo incluido, queden en una misma linea dentro del div contenedor, le asigne un color de fondo para que se vea el ejemplo, no se si esto es posible, ya que le di un % del ancho para que me cabieran en una misma linea pero no estan alineados, esto es posible, saludos.

[cristian_cena]

Si con "alinear" te refieres a crear columnas, (porque en tu ejemplo trabajas con margenes pero no estas creando columnas) con la respuesta anterior debes poder hacerlo, es decir usando float, siempre controlando los anchos de las columnas para que quepan en el contenedor.
Hace poco un compañero preguntaba sobre como alinear horizontal y verticalmente, te invito a leer el tema.
Si lo que intentas es igualar los altos de las columnas, hay muchísimas soluciones todas válidas.

Saludos.

[roboty]

Perdona no lo entendi, pero ahora si, me has resuelto mi problema, muchas gracias.