3 divs en la misma linea

ircop · #1 (**permalink**) 29/12/2008, 04:45

quiero poner 3 divs, en la misma linea, y el tercero siempre se coloca debajo. mirar mi codigo.

<body>

<div id="cabecera">Logotipo</div>

<div id="menu">Menu</div>


<div id="contorno">

<div id="noticias">noticias</div>

<div id="principal">esto es un ejemplo del bloque principal</div>

<div id="secundario"> bloque secundario</div>
</div> 

</body>

mi css

#contorno
{
width:800px;
margin-top:1em;
border:2px solid;
}

/*esto es el menu de la izquierda*/
#noticias
{
float:left;
padding: 0,5em 0,5em 0,5em 0,5em;
margin-top:1em;
border: 1px solid;
background-color: #999999;
width:20%;
}

#principal
{
padding:2em 2em 2em 2em;
margin-top:1em;
/*margin-left: 2em;*/
border: 1px solid red;
width:40%;
}

#secundario
{
float:right;
/*padding:2em 2em 2em 2em;*/
border: 1px solid orange;
width:10%;
}

#pie
{
padding-bottom:0,5em;
padding-top:0,5em;
}

Es decir he realizado una capa "contorno" y dentro de esta he metido 3, una float:left y las otras al lado, pues la tercera, se coloca debajo a la derecha...

que estoy haciendo mal

gracias

Aresillo · #2 (**permalink**) 29/12/2008, 05:24

Creo que es esto lo que quieres...
http://www.araudi.net/ejemplos/3columnas.html

Te lo he adaptado:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>3 Columnas diseño liquido - Recursos CSS - araudi.net adaptado por Aresillo para ircop</title>
<style type="text/css">
* {margin:0;padding:0;}
html, body {height: 100%;}

#contenedor {width: 880px;height: 100%; margin-top:1em; border:2px solid; padding:1em;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 10%;background-color: #f00;}
#col_izq {float: left; width: 20%;padding: 0,5em; background: #999;}
#col_cen {background-color: #ccc;}
</style>
</head>
<body>
<div id="contenedor">
<div id="col_der"></div>
<div id="col_izq"></div>
<div id="col_cen"></div>
</div>
</body>
</html>

Aresillo!!

Mikmoro · #3 (**permalink**) 29/12/2008, 05:26

Diría que si el div #principal no está flotado, no permitirá que se coloque otro a su derecha, aunque al secundario le pongas float: right.

Aresillo · #4 (**permalink**) 29/12/2008, 05:36

Choque choque...!!!

Prueba las dos cosas... el mío es para un height del 100%

Aresillo!!

Mikmoro · #5 (**permalink**) 29/12/2008, 05:43

De morros

ircop · #6 (**permalink**) 29/12/2008, 09:17

Gracias, Aresillo, funciona perfecto

y he visto tu pagina, voy ir haciendo todo lo que pones en ella

un saludo

Aresillo · #7 (**permalink**) 29/12/2008, 11:12

No no! Que no es mi página!!
Que es la de Mikmoro! Las gracias a él por dejarnos esa fuente de conocimientos...

Aresillo!!

seoista · #8 (**permalink**) 30/12/2008, 05:47

"Recursos CSS", muy buenísima página

Gracias y Féliz Año.