Problema con div

Guillote11 · #1 (**permalink**) 14/05/2011, 22:54

Hola a todos tengo el siguiente problema. Tengo una div contenedor en donde englobo todas las divs, ésta tiene position: relative, bien. También tengo una div para el banner una para la barra de navegacion y una para el margen derecho e izquierdo, el tema es con la div pie (pie de página) ésta div tiene el código siguiente
.pie{width:800px;
height:200px;
background-color:#009;
position: relative;}

increiblemente en el explorer me lo posiciona debajo y mientras voy agregando contenido al resto de las divs, esta respeta el position:absolute y baja, pero con mozilla y opera la div se me va hacia arriba de la página y además no me respeta el position:relative. espero haberme hecho entender gracias

ArturoGallegos · #2 (**permalink**) 14/05/2011, 23:32

sin ver el código completo en cuestión es dificil ayudarte ya que al pie de pagina puede estar afectándolo indirectamente otro css o elemento html, pero intenta colocarle un clear:both

Código CSS:

Ver original.pie{width:800px;
height:200px;
background-color:#009;
clear:both}

por otro lado, no es necesario especificar position:relative si no utilizas z-index o deseas posicionar otro elemento que se encuentre en su interior con position:absolute

Guillote11 · #3 (**permalink**) 15/05/2011, 20:45

Este es mi código css:

.contenedor{
width:800px;
height:1000px;
margin:0px auto 1000px auto;
background-color:#CCC;

}

.banner{
width:800px;
position:absolute;
height:150px;
margin:0px auto 150px auto;
background-color:#666
}

.barra {
width:800px;
position:absolute;
height:30px;
margin:150px auto auto auto;
background-color:#555;
left: 0px;
top: 0px;
}

.margen_izq {
width:150px;
height:670px;
background-color:#0F0;
margin-top:180px;
float:left
}

.contenido {
width:500px;
/*height:670px;*/
background-color:#FF0000;
margin-top:180px;
float:right
}

.margen_der {
width:150px;
height:670px;
background-color:#0F0;
margin-top:180px;
float:right
}

.pie{
width:800px;
height:200px;
clear:both;
/*no anda en ex*/
background-color:#009;
}

ArturoGallegos · #4 (**permalink**) 15/05/2011, 21:02

aja ese es el código css y el html? por cierto no se si te fijaste que el editor en la parte de arriba dice hightlight, este sirve para englobar el código y que se distinga que tipo de código es

Guillote11 · #5 (**permalink**) 16/05/2011, 14:36

Este es el html:

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="contenedor" style="position:relative">
<div class="banner">
<div class="barra">
</div><!--------Cierro div barra------------>
<div class="margen_izq" style="position:relative"></div><!-------------Cierrro div margen izq----------------------->
</div><!------Cierro div banner----------->
<div class="margen_der" style="position:relative"></div>
<div class="contenido" style="position:relative">
<table width="500">
<tr>
  <td><pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  <pre>putoooooOOOOOOOSSS</pre>
  <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
</td>
</tr>
</table>
</div> 
<!---------Cierro div contenido------------>
<div class="pie" style="position:relative"></div>
</div><!-----Cierro div contenedor-------->
 
</body>
</html>

Guillote11 · #6 (**permalink**) 16/05/2011, 14:42

Este es el html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="contenedor">
<div class="banner">
<div class="barra">
</div>
<div class="margen_izq">
</div>
</div>
<div class="margen_der">
</div>
<div class="contenido">
</div>

<div class="pie">
</div>
</div>

</body>
</html>

ahhh!!! me olvidé de ponerte que en el css las divs: contenedor, contenido y los margenes tienen position:relative, igual tengo el mismo problema espero que con el html lo entiendas mejor gracias