Problemas con 3 divs

**dooplanillo** · 06/04/2007, 10:40

Buenas a todos y gracias de antemano.

Mi problema es el siguiente, tengo hecha una web usando el código de 3 divs del curso de esta web (muchas gracias, muy instructivo el curso). La cuestión es que en firefox se ve perfectamente, pero en iexplorer los divs 'menu' y 'login' aparecen debajo de 'lateralGrande'.

Los divs menu y login tienen tablas ya que no me he atrevido a hacerlo con divs (esta ha sido mi primera experiencia con divs).

Os pego el código, primero el css:

Código:

body {background-image:url(../imagenes/fondo.jpg); background-color:#4a575d; background-repeat:no-repeat;}

#global{width:661px; padding:10px; background-color:#FFFFFF;}

#contenedor {margin:0px; padding:0px; width:663px;}

#cabecera{ vertical-align:top; width:663px; height:82px; clear:both;}

#separador{ width:auto; height:8px; clear:both;}

#separadorPeque{ width:259px; height:8px;}

#menu{ width:259px; height:164px;}

#lateralGrande {width:404px; height:424px; vertical-align:top; background-image:url(../imagenes/imagen_portada.jpg); float:right;}

#login {width:259px; height:252px; background-image:url(../imagenes/fondo_login.gif); background-repeat:repeat-x;}

Y aqui va el html:

Código:

<body onload="MM_preloadImages('imagenes/btn_inicio2.gif','imagenes/btn_empresa2.gif','imagenes/btn_servicios2.gif','imagenes/btn_contacto2.gif','imagenes/btn_legal2.gif')">

<div id="global">

	<div id="cabecera">[img]imagenes/barra_cabecera.jpg[/img][img]imagenes/logo.jpg[/img][img]imagenes/slogan.gif[/img]</div>

	<div id="separador" align="left"></div>
	
	<div id="contenedor">
	
		<div id="lateralGrande"></div>
		
		<div id="menu" align="left">
		<table width="259" height="164" border="0" cellpadding="0" cellspacing="0">
		<tr>
		<td>[img]imagenes/barra_menu.gif[/img]</td>
		<td>
		[img]imagenes/btn_inicio1.gif[/img]

		[img]imagenes/btn_empresa1.gif[/img]

		[img]imagenes/btn_servicios1.gif[/img]

		[img]imagenes/btn_contacto1.gif[/img]

		[img]imagenes/btn_legal1.gif[/img]</td>
		</tr>
		</table>
		</div>
		<div id="separadorPeque"></div>
		<div id="login">
		<table width="259" border="0" cellpadding="0" cellspacing="0">
		<tr>
		<td>[img]imagenes/barra_login.gif[/img]</td>
		<td width="27" height="252">[img]imagenes/pixel.gif[/img]</td>
		<td valign="top">
			<table width="209" border="0" cellpadding="0" cellspacing="0">
			<tr>
			<td width="209" height="20">[img]imagenes/pixel.gif[/img]</td>
			</tr>
			<tr>
			<td width="209">[img]imagenes/acceso.gif[/img]</td>
			</tr>
			<tr>
			<td width="209" height="13">[img]imagenes/pixel.gif[/img]</td>
			</tr>
			<tr>
			<td width="209" height="18">[img]imagenes/usuario.gif[/img]</td>
			</tr>
			<tr>
			<td width="209" height="12">[img]imagenes/pixel.gif[/img]</td>
			</tr>
			<tr>
			<td width="209" height="18">[img]imagenes/password.gif[/img]</td>
			</tr>
			<tr>
			<td width="209" height="12">[img]imagenes/pixel.gif[/img]</td>
			</tr>
			<tr>
			<td></td>
			</tr>
			</table>
		</td>
		</tr>
		</table>
		</div>
	
	</div>

</div>
</body>

Lo dicho, gracias de antemano por la ayuda y enhorabuena por la web, es la primera vez que veo explicado de una manera clarísima y sencilla el tema de los divs, espero con impaciencia más capítulos :)
[/code]

**solidaria** · 06/04/2007, 14:54

Hola dooplanillo,

Debes colocarle un float:left a los div menu, login, y miniseparador.

yo en lugar de poner un miniseparador lo que haria es colocarle un margin-top:10px al div login, de esta forma, le colocas un margen de 10 píxeles arriba creando un espacio entre div y div.

Como todos los div son flotantes, comprobarás que el div contenedor y global no llegan hasta abajo, colócale el div separador debajo de lateral, login y menu.

Código:

body {background-image:url(../imagenes/fondo.jpg); background-color:#4a575d; background-repeat:no-repeat; text-align:center;}

#global{width:661px; padding:10px; background-color:#FFFFFF;}

#contenedor {margin:0px; padding:0px; width:663px;}

#cabecera{ vertical-align:top; width:663px; height:82px; clear:both; background-color:#CCCCCC;}

#separador{ width:auto; height:8px; clear:both;}

#menu{ width:259px; height:164px;  float:left; background-color:#FF0000;}

#lateralGrande {width:404px; height:424px; vertical-align:top; background-image:url(../imagenes/imagen_portada.jpg); float:right; }

#login {width:259px; height:252px; background-image:url(../imagenes/fondo_login.gif); background-repeat:repeat-x; margin-top:8px; float:left; background-color:#FF0000;}

Código:

<div id="global">

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

   <div id="separador" align="left"></div>
   
   <div id="contenedor">
   
      <div id="lateralGrande">lateral</div>
      
      <div id="menu" align="left">
        

menu </p>
        

menu</p>
        

menu</p>
      </div>
      <div id="login">
        

login </p>
        

login</p>
        

login</p>
      </div>
   <div id="separador">
   </div>

Te he quitado el contenido de los div para aclararme mejor y te los he pintado de color

**dooplanillo** · 06/04/2007, 17:52

Muchas gracias solidaria!!!

Ya funciona :)
Hay diferencias de separación 'los divs separadores', en firefox sale perfect, y en iexplorer hay más separación de la debida, pero eso ya es un mal menor. Voy a probar a sustituir los separadores y ponerle directamente el padding a los divs de login y menu, a ver si se soluciona.

Tema: Problemas con 3 divs

Herramientas

Buscar Tema

Visualizar

Problemas con 3 divs

Solucionado :)

Temas Similares

PROBLEMAS CON LOS DIVS

Marcadores

Marcadores

Permisos de Publicación