problemas mozilla y width

#1 (**permalink**) 11/05/2008, 08:40

hola tengo un problema con mozilla que no me reconoce el ancho de un div 100% entonces me muestra las tablas al 100% respecto de toda la pantalla

aqui dejo el resumen del codigo

no le encuentro solucion!

saludos y gracias de antemano

Código PHP:

  <html> 
<head> 
<style> 
 
#content { 
text-align: left; 
height: 100%; 
background-color: #fff; 
width: 100%; 
 
} 
 
 
 
#left_sidebar { 
float: left; 
width: 120px; 
height: 200%; 
background: #43758c; 
} 
 
 
 
 
#right_sidebar_container_bottom{ 
        float:right;  
 
    width: 310px; 
 
        height:100%; 
        background:#143d55; 
 
} 
 
#main { 
width: 100%; 
padding-top: 0px; 
height: 100%; 
margin-left: 30px; 
} 
 
 
</style> 
</head> 
<body> 
 
<div id=content> 
 
<div id=left_sidebar> 
</div> 
 
 
 
<div id=main> 
 
<table border=1 width="100%"> 
 
<td> 
contenido 
</td> 
</table> 
 
</div> 
</div> 
 
 
</body> 
</html>

Mikmoro · #2 (**permalink**) 11/05/2008, 11:31

Evidentemente no sé a qué div te refieres, pero el problema debe ser que cuando fijas un porcentaje debe ser un porcentaje de algo, y si su elemento padre no tiene un tamaño, no podrás fijar un porcentaje de "nada".

Lo que se suele hacer en este caso es empezar por

html, body { width: 100%;}

de manera que el contenedor principal ya tiene un tamaño, y ahora puedes fijar el 100% de su tamaño.

Mikel.

#3 (**permalink**) 11/05/2008, 12:01

hola acabo de hacer lo que me dices pero no funciona,

me refiero a al <div id=main> que es el que contiene a la tabla.

saludos y gracias

Mikmoro · #4 (**permalink**) 11/05/2008, 12:16

Creo que no habías planteado bien la consulta: no es que no te tome el 100% (que sí lo está haciendo), sino que lo que querías era que tenga el 100% menos los 120px del lateral izquierdo. Eso hay que hacerlo de otra manera. Ahora te lo miro.

Mikel.

Mikmoro · #5 (**permalink**) 11/05/2008, 12:25

Prueba a ver si te va bien así:

Cita:

<html>
<head>
<style>
#content {
text-align: left;
height: 100%;
background-color: #fff;
width: 100%;
}
#left_sidebar {
float: left;
width: 120px;
height: 200%;
background: #43758c;
}
#right_sidebar_container_bottom{
float:right;
width: 310px;
height:100%;
background:#143d55;
}
#main {
padding-top: 0px;
height: 100%;
margin-left: 30px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="content">
<div id="left_sidebar">
</div>

<div id="main">
<table border="1" width="100%">
<td>
contenido
</td>
</table>
</div>

</div>
</body>
</html>

Mikel.

#6 (**permalink**) 11/05/2008, 15:32

hey mil gracias ahora si funciona!

veo que pusiste overflow: hidden;

ahora voy a averiguar de que se trata

saludos