Foros del Web » Creando para Internet » CSS »

3 divs en la misma linea

Estas en el tema de 3 divs en la misma linea en el foro de CSS en Foros del Web. 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> <!-- contorno ...
  #1 (permalink)  
Antiguo 29/12/2008, 04:45
 
Fecha de Ingreso: agosto-2004
Mensajes: 265
Antigüedad: 13 años, 3 meses
Puntos: 0
3 divs en la misma linea

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>

<!-- contorno -->
<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> <!-- fin contorno -->

</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
__________________
Recuerda que si señalas con el dedo, el resto de los dedos te señalan a ti!
  #2 (permalink)  
Antiguo 29/12/2008, 05:24
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: 3 divs en la misma linea

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!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 29/12/2008, 05:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: 3 divs en la misma linea

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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 29/12/2008, 05:36
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: 3 divs en la misma linea

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

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #5 (permalink)  
Antiguo 29/12/2008, 05:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: 3 divs en la misma linea

De morros
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 29/12/2008, 09:17
 
Fecha de Ingreso: agosto-2004
Mensajes: 265
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: 3 divs en la misma linea

Gracias, Aresillo, funciona perfecto

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

un saludo
__________________
Recuerda que si señalas con el dedo, el resto de los dedos te señalan a ti!
  #7 (permalink)  
Antiguo 29/12/2008, 11:12
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: 3 divs en la misma linea

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

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #8 (permalink)  
Antiguo 30/12/2008, 05:47
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: 3 divs en la misma linea

"Recursos CSS", muy buenísima página (By © Mikmoro)

Gracias y Féliz Año.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:11.