Problema: Alinear 2 divs en una línea

Fix3r · #1 (**permalink**) 19/12/2006, 15:29

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

Mikmoro · #2 (**permalink**) 20/12/2006, 06:17

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.

Fix3r · #3 (**permalink**) 20/12/2006, 10:39

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

Fix3r · #4 (**permalink**) 20/12/2006, 14:12

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.

Mikmoro · #5 (**permalink**) 20/12/2006, 16:09

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.

Fix3r · #6 (**permalink**) 20/12/2006, 17:04

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

Mikmoro · #7 (**permalink**) 20/12/2006, 17:37

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.

Fix3r · #8 (**permalink**) 20/12/2006, 17:45

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?

PatomaS · #9 (**permalink**) 20/12/2006, 18:56

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

Fix3r · #10 (**permalink**) 20/12/2006, 19:08

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

PatomaS · #11 (**permalink**) 20/12/2006, 20:12

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

Fix3r · #12 (**permalink**) 20/12/2006, 20:42

Gracias por dedicar tu tiempo en ayudar. Las probaré y cualquier cosa aviso que tal.