Hola:
yo tengo un caso parecido pero al contrario, lo que yo quiero es que el div que se viera afectado por que otro se le ponga encima en vez de quedarse quieto se desplace hacia abajo, como evitándolo. He probado de mil maneras y el afectado se emperra en quedarse quieto
. La estructura es así:
<body>
<div id="container">
<!-- banner con logo -->
<div id="bannerlogo">
......
</div>
<!-- final banner con logo -->
<!-- barra de navegacion horizontal -->
<div id="csshbar">
.........
</div><!-- final de barra de navegacion horizontal -->
<!-- cajas de texto -->
<div id="cajastexto">
<!-- Titulo de la pagina -->
<div id="titpagina">
.....
</div><!-- final Titulo de la pagina -->
<div id="cajasypie">
<div id="cuerpocentral">
<!-- caja de texto izq -->
<div id="colizq">
......
</div>
<!-- final caja de texto izq -->
<!-- caja de texto central -->
<div id="colcent">
..........
</div>
<!-- final caja de texto central -->
<!-- caja de texto derecha -->
<div id="colder">
..........
</div>
<!-- final caja de texto derecha -->
</div><!--
este cierra el cuerpocentral -->
<!-- final cajas de texto -->
<!-- pie de pagina -->
<div id="pie">
.........
</div>
<!-- fin pie de pagina -->
</div> <!--
este cierra el cajasypie -->
</div><!--
este cierra el cajastexto -->
</div><!--
este cierra el container -->
</body>
y el css es:
* {
padding: 0;
margin: 0;
z-index: 1;
}
body {
margin: 0px auto;
background-color: #D3E8FF;
background-image: url(images/bannerlogofondo.jpg);
background-position: top;
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#container {
top: 0px;
width: 750px;
margin: 0px auto;
}
#bannerlogo {
position: absolute;
top: 0px;
margin: 0px auto;
}
/* barra de navegacion horizontal */
...............
/* cajas de texto centrales */
#cajastexto {
position: relative;
width: 750px;
top: 135px;
}
#titpagina {
position: relative;
top: 0px;
width: 600px;
text-align: center;
font-size: 14pt;
color: #0060AF;
left: 0px;
}
#cajasypie {
width: 750px;
position: relative;
}
/* caja de texto izquierda */
#colizq {
position: absolute;
left: 0px;
background-color: white;
width: 240px;
min-height: 370px;
height: 370px;
padding: 15px 9px 5px 30px;
margin: 0px;
font-size: 6pt;
text-align: left;
width/* */:/**/240px;
width: /**/240px;
}
div[id] #colizq {
height:auto;
}
*html #colizq {
width: 240px;
padding: 15px 12px 5px 30px;
}
/* fin caja de texto izquierda */
/* caja de texto central */
#colcent {
position: absolute;
left: 290px;
background-color: white;
width: 240px;
padding: 15px 9px 5px 30px;
margin: 0px;
font-size: 6pt;
text-align: left;
min-height: 370px;
height: 370;
}
#colcent {
width/* */:/**/240px;
width: /**/240px;
}
div[id] #colcent {
height:auto;
}
*html #colcent {
width: 240px;
padding: 15px 12px 5px 30px;
}
/* fin caja de texto central */
/* caja de texto derecha */
#colder {
position: absolute;
left: 585px;
background-color: white;
width: 150px;
padding: 0;
margin: 0px;
font-size: 6pt;
text-align: left;
min-height: 370px;
height: 370px;
}
#colder {
width/* */:/**/150px;
width: /**/150px;
}
div[id] #colder {
height:auto;
}
*html #colder {
width: 150px;
padding: 0;
}
/* fin caja de texto derecha */
/* fin cajas de texto centrales */
/* pie de pagina */
#pie {
position: absolute;
top: 1em;
width: 750px;
margin: 0px auto;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000066;
padding-top: 2em;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 2;
}
#pie a {
padding-left: 10px;
display: inline;
}
/* fin pie de pagina */
pués bien, el que me pone problema es el div pie, que no hay manera de que se quede después de la tres cajas centrales de texto, las cuales están metidas dentro de un div que es cuerpocentral. El div pie siempre se queda en relación al inicio del div cajasypie (en donde está metido con el div cuerpocentral), aunque le ponga position:relative para que se posicione de forma relativa (después) del div cuerpocentral. En donde puede estar el error? Lo que busco es poder dejar el pie a 1em del cuerpocentral, sea cual sea el tamaño que tenga este según lo que contenga cualquiera de las 3 columnas o el tamaño de letra que le pongan.
Gracias. Jorge H.