Foros del Web » Creando para Internet » CSS »

Problema: Alinear 2 divs en una línea

Estas en el tema de Problema: Alinear 2 divs en una línea en el foro de CSS en Foros del Web. Hola, pues quisiera saber eso, cómo alinear dos divs en una linea y hacer que un div esté centrado y que el otro esté alineado ...
  #1 (permalink)  
Antiguo 19/12/2006, 15:29
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Problema: Alinear 2 divs en una línea

Hola, pues quisiera saber eso, cómo alinear dos divs en una linea y hacer que un div esté centrado y que el otro esté alineado a la derecha (en mi caso).

Mi duda viene de que mi "intento de pág" me queda así en IE7:
http//img329.imageshack.us/img329/5484/ie7gk6.jpg

y así en FF:
http//img329.imageshack.us/img329/3913/ffvn6.jpg

Y quiero que en FF se vea como en IE7.

Aquí les dejo el código:

HTML
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cannibal RO</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

<body id="body">
	<center><div id="Contenedor">
        <div id="Cabecera"> 	IMAGEN			
	</div>
		<div id="menu">
		 <ul>
 		 <li>Inicio</a></li>
 		 <li>Foros</a></li>
 		 <li>Control Panel</a></li>
 		 <li>Descargas</a></li>
	         <li>Información</a></li>
	         <li>Contacto</a></li>
	         <li>Vota</a></li>
		 </ul>
         
      </div>
		<div id="Contenido"> 
<pre>
		
		
		
En construcción ...
		
		
		
</pre>
		</div>
	</div> <!--TERMINA EL CONTENEDOR-->
	
	<div id="Pie">
		<center>
		<div id="Otros">alt="Get Firefox" "www(punto)esferanegra(punto)com/wp-content/themes/freshy-10/images/get_firefox_80x15.png"</div>
		<div id="Derechos">	Pie </div>
				
		</center>
</div>
		</center>
</body>
</html>
Y el estilo:

Código:
#body	{
 		background-color:#e3eaf4;
		background-image:url();
		background-repeat:repeat;
		margin-top:8px;
 		}
#Contenedor	{
	width: 800px;
	height: auto;
				
			}
#Cabecera	{
	background-image:url();
	width:800px;
	height:204px;
	background-repeat:no-repeat;
		
	
			}
#menu{
	width:800px;
	background-image:url();
	text-align:center;
	border-bottom:1px solid #666666;
	border-top:1px solid #666666;

}
 #menu ul{
 padding:0px;
 margin:0px;
 list-style:none;
 font-weight:bold;
 
 }
 #menu li{
 line-height:20px;
 display:inline;
 
 }
 #menu li a{
 padding:0 10px;
 color:#0033cc;
 text-decoration:none;
 }
 #menu li a:hover{
 padding:0 10px;
 color:#ffffff;
 text-decoration:none;
 background-color:#99ccff;
 
 }
 #Contenido {
 background-color:#e3eaf4;
 height:auto;
 border:1px solid #666666;
 
 }
 #Pie	{
 background-color:#d2d9e3;
 text-align:center;
 border:1px solid #666666;
 width:798px;
 height:auto;
 margin-top:2px;
 padding:3px 0px;
 
 }
 #Derechos	{
	width:400px;
 
 }
 #Otros	{
	width:50px;
	left: 52px;
	text-align:right;
	float: right;
	padding-right:5px;
P.D: Perdonen el código y las imágenes pero eso de no poder postear enlaces está asqueroso
  #2 (permalink)  
Antiguo 20/12/2006, 06:17
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
Re: Problema: Alinear 2 divs en una línea

Buenas. En esto, como en todo, siempre hay varias soluciones posibles. Te envío la que a mi me parece mejor teniendo en cuenta tu código. He hecho algunos cambios tanto en el html como en la css, así que échale un vistazo a ver qué te parece y me comentas. Se ve igual en Firefox y en IE6. En el 7 no lo puedo probar, porque de momento estoy decidido a no instalarlo, a no ser por causa de fuerza mayor.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Cannibal RO</title>
  <link href="estilo.css" rel="stylesheet"
 type="text/css" />
<!--[if IE]>
<style>
#Otros { width: 50px;
float: right;
display: block;
margin-top: -18px;
margin-right: 2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="Contenedor">
<div id="Cabecera"> IMAGEN </div>
<div id="menu">
<ul>
  <li>Inicio</li>
  <li>Foros</li>
  <li>Control Panel</li>
  <li>Descargas</li>
  <li>Informaci&oacute;n</li>
  <li>Contacto</li>
  <li>Vota</li>
</ul>
</div>
<div id="Contenido">
<pre>En construcci&oacute;n ...<br /></pre>
</div>
<div id="Pie">
<div id="Derechos"> Pie </div>
<div id="Otros"><img alt="Get Firefox"
 src="http://www.esferanegra.com/wp-content/themes/freshy-10/images/get_firefox_80x15.png" /></div>
</div>
</div>
</body>
</html>
Y la CSS
Código:
  #body { background-color: rgb(227, 234, 244);
    background-image: url();
    background-repeat: repeat;
    margin-top: 8px;
    }

  #Contenedor { margin: 0pt auto;
    width: 800px;
    text-align: center;
    }

  #Cabecera { background-image: url();
    width: 800px;
    height: 204px;
    background-repeat: no-repeat;
    }

  #menu { border-top: 1px solid rgb(102, 102, 102);
    border-bottom: 1px solid rgb(102, 102, 102);
    width: 800px;
    background-image: url();
    text-align: center;
    }

  #menu ul { margin: 0px;
    padding: 0px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    font-weight: bold;
    }

  #menu li { line-height: 20px;
    display: inline;
    }

  #menu li a { padding: 0pt 10px;
    color: rgb(0, 51, 204);
    text-decoration: none;
    }

  #menu li a:hover { padding: 0pt 10px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: rgb(153, 204, 255);
    }

  #Contenido { border: 1px solid rgb(102, 102, 102);
    background-color: rgb(227, 234, 244);
    }

  #Pie { border: 1px solid rgb(102, 102, 102);
    padding: 3px 0px;
    background-color: rgb(210, 217, 227);
    width: 798px;
    margin-top: 2px;
    text-align: center;
    }

  #Derechos { width: 400px;
    display: inline;
    }

  #Otros { width: 50px;
    float: right;
    display: block;
    margin-top: -18px;
    margin-right: 32px;
    text-align: left;
    }
Mikel.
  #3 (permalink)  
Antiguo 20/12/2006, 10:39
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Re: Problema: Alinear 2 divs en una línea

Muhas gracias, lo modifiqué un poco con tu código y le estuve moviendo otras cosas y quedó bien en los dos. Muchas gracias por el código limpio
  #4 (permalink)  
Antiguo 20/12/2006, 14:12
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Re: Problema: Alinear 2 divs en una línea

Hola, de nuevo los molesto. Hay alguna otra forma de hacer esto? Esque quiero hacerlo de nuevo con dos divs y que queden juntos dentro de un div contenedor.

El contenedor mediría 800 px y los dos divs alineados medirían 395px a lo largo cada uno. El alto no importa. Me interesa una forma de hacer que los dos divs enren en una sola línea en otro div. Saludos.
  #5 (permalink)  
Antiguo 20/12/2006, 16:09
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
Re: Problema: Alinear 2 divs en una línea

Pues no sé si te entiendo bien pero esto:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Divs</title>
  <style type="text/css">
#contenedor {
margin: 0pt auto;
width: 800px;
height: 100px;
}
#div1, #div2 {
float: left;
width: 395px;
height: 80px;
}
  </style>
</head>
<body>
<div id="contenedor">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
es un div de 800 px que contiene otros dos en línea, cada uno de 395 px, y pegados el uno al otro. Si no era eso ya dirás.

P.D.: si no ves nada es que ninguno tiene fondo ni contenido. Ponles un color de fondo y los verás.
Mikel.
  #6 (permalink)  
Antiguo 20/12/2006, 17:04
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Re: Problema: Alinear 2 divs en una línea

Ok, muchas gracias. Si, si me entendiste y está muy bien el código pero el problema es que este div de 800px está dentro de otro div junto con otros divs. Si yo pongo la propiedad de float, las capas de 395px se salen de la capa de 800px y se meten en la que está debajo.

No se podría solucionar con una etiqueta span? Por qué dicen que no son recomendables o qué? Saludos
  #7 (permalink)  
Antiguo 20/12/2006, 17:37
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
Re: Problema: Alinear 2 divs en una línea

Creo que ya has visto que debes dar la información de lo que quieres hacer lo más exacta posible, si no, las soluciones de las que hablamos no sirven para nada.

Mikel.
  #8 (permalink)  
Antiguo 20/12/2006, 17:45
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Re: Problema: Alinear 2 divs en una línea

Lo que pasa es que pensé que había una solución sin float. En lo personal el float no me gusta. Siempre arruina mis diseños ...

Alguna solución?
  #9 (permalink)  
Antiguo 20/12/2006, 18:56
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Problema: Alinear 2 divs en una línea

Hola

Si float arruina tus diseños es que aun no lo usas bien, a lo mejor debes practicar un poco más con páginas sencillas y sin contenido sensible hasta que salgan bien.

;)

De todas maneras, y sin haber leido todo lo que quieres, hay otras maneras de hacer lo que quieres, por ejemplo, puedes asignar posiciones absolutas a las capas, puedes usar el display table y table-cell, puedes asignar un id a las capas que esten una al lado de la otra y modificar su display a inlline...

Hay varias opciones.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #10 (permalink)  
Antiguo 20/12/2006, 19:08
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Re: Problema: Alinear 2 divs en una línea

Lo de el display:online ya lo intenté y no funciona. Lo de la posición absoluta también y sale diferente en FF, en IE no lo probé porque me interesa más que salga mejor en FF. Y lo de las tablas no sé como hacerlo. Efectivamente, no se usar muy bien lo del float, pero si he visto que da buenos resultados, sólo que eso de que se salga de la capa en la que está es muy ...no sé. Me da dolores de cabeza.

Saludos
  #11 (permalink)  
Antiguo 20/12/2006, 20:12
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Problema: Alinear 2 divs en una línea

Hola

Aquí dejo unos ejemplos de que los códigos funcionan. Solo debes adaptarlos a tus necesidades.

No he puesto el de tablas, porque la verdad tiene poco sentido, aunque es una opción más.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="es" />
	<style type="text/css">
	* {border: 0; padding: 0; margin 0;}
	html, body {background: #f00;}
	#capa1 {position: absolute; top: 50px; left: 10px; width: 50px; height: 50px; background: #0f0;}
	#capa2 {position: absolute; top: 50px; left: 70px; width: 50px; height: 50px; background: #00f;}
	#lista1 {display: inline;}
	#lista1 li, #lista1 div {display: inline;}
	#capa3 {background: #0f0;}
	#capa4 {background: #00f;}
	#lista2 {float: left; list-style-type: none;}
	#lista2 li {float: left; padding: 0 5px; height: 50px;}
	#capa5 {background: #0f0; height: 50px; width: 50px;}
	#capa6 {background: #00f; height: 50px; width: 50px;}
	#limpiador {clear: both;}
	</style>
	<title>Ejemplo de posionamiento de capas</title>
	</head>
<body>
<p>A continuación hay dos capas alineadas una junto a la otra mediante posionamiento absoluto</p>
<div id="capa1">capa 1</div>
<div id="capa2">capa 2</div>
<p>&nbsp;</p><p>&nbsp;</p>
<p>A continuación hay dos capas alineadas una junto a la otra mediante el uso de listas y display: inline</p>
<ul id="lista1">
	<li><div id="capa3">capa 3</div></li>
	<li><div id="capa4">capa 4</div></li>
</ul>
<p>&nbsp;</p>
<p>A continuación hay dos capas alineadas una junto a la otra mediante el uso de listas y float: left</p>
<ul id="lista2">
	<li><div id="capa5">capa 5</div></li>
	<li><div id="capa6">capa 6</div></li>
</ul>
<p id="limpiador">&nbsp;</p>
</body>
</html>
Felicidad
__________________
¡ hey, hou, hou, hey !
  #12 (permalink)  
Antiguo 20/12/2006, 20:42
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Re: Problema: Alinear 2 divs en una línea

Gracias por dedicar tu tiempo en ayudar. Las probaré y cualquier cosa aviso que tal.
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 19:30.