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