Mostrar Mensajes
31
CSS / [AYUDA] MAQUETACION DE COLUMNAS
« en: 26 de Octubre de 2012, 17:51:41 pm »
Hola amigos. Escribo aquí en última instancia por estar desesperado. Ya que llevo varios días pensando y no consigo lograrlo. Adjunto imágenes y os explico más detalladamente.
IMAGEN CORRECTA: http://www.lacomparsademorta.16mb.com/img/correcto.PNG
IMAGEN INCORRECTA: http://www.lacomparsademorta.16mb.com/img/incorrecto.PNG
Mi objetivo es conseguir que todo este en position:fixed;, menos el div con el borde rojo. El div que tiene el borde rojo quiero que sea auto para leerse la información. Esto que he explicado lo he conseguido. Pero al darle zoom a la página y mover el scroll horizontal se mueve el div con el color de borde rojo y da como error la IMAGEN INCORRECTA.
Espero que me podáis ayuda amigos.
Gracias.
IMAGEN CORRECTA: http://www.lacomparsademorta.16mb.com/img/correcto.PNG
IMAGEN INCORRECTA: http://www.lacomparsademorta.16mb.com/img/incorrecto.PNG
Mi objetivo es conseguir que todo este en position:fixed;, menos el div con el borde rojo. El div que tiene el borde rojo quiero que sea auto para leerse la información. Esto que he explicado lo he conseguido. Pero al darle zoom a la página y mover el scroll horizontal se mueve el div con el color de borde rojo y da como error la IMAGEN INCORRECTA.
Espero que me podáis ayuda amigos.
Gracias.
Código: [Seleccionar]
{include file="header.tpl"}
<div id="wrap" class="clearfix">
<div id="container">
<div id="cabecera">
cabecera position:fixed
</div><!-- class cabecera -->
<div id="wrapContenedor">
<div id="c1Wrap">
<div id="c1">
Columna 1 de menu position:fixed
</div><!-- div c1 -->
</div><!-- div c1Wrap -->
<div id="c23Wrap" class="sombra1">
<div id="c2Wrap">
<div id="c2">
Columna 2 de informarcion
</div><!-- c2 -->
</div><!-- c2Wrap -->
<div id="c3Wrap">
<div id="c3">
Columna 3 de publicidad position:fixed
</div><!-- div c3Wrap -->
</div><!-- div c3Wrap -->
</div><!-- div c23Wrap -->
</div><!-- div wrapContenedor -->
</div><!-- fin de container -->
{include file="foother.tpl"}
</div><!-- FIN DE WRAP -->
Código: [Seleccionar]
#wrap {margin:0 auto; text-align:left; width:950px; overflow:hidden;}
#container {overflow:hidden; margin:60px 0px 0px 0px;}
#cabecera {width:908px; margin-top:-20px !important; padding:10px 20px; border:1px solid #CCC; border-top:none; overflow:auto; background:#FFF; z-index:200; position:fixed;}
#wrapContenedor {width:950px; padding-top:30px;}
#wrapContenedor #c1Wrap {float:left; width:100px; z-index:50;}
#wrapContenedor #c1Wrap #c1 {padding-top:20px; position:fixed;}
#wrapContenedor #c23Wrap {width:808px; float:left; margin-left:100px; margin-bottom:20px; padding:20px; padding-bottom:0px !important; background:#FFF; border:1px solid #CCC; border-top:none; -moz-border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; z-index:40px;}
#wrapContenedor #c2Wrap {float:left; width:600px; position:relative;}
#wrapContenedor #c2Wrap #c2 {margin-right:20px;}
#wrapContenedor #c3Wrap {float:left; width:208px;}
#wrapContenedor #c3Wrap #c3 {width:208px; position:fixed;}