Capa derrama contenido sobre otra

Italico76 · #1 (**permalink**) 14/11/2007, 07:43

Amigos:

Tengo un diseño tipico (header, 3 columnas y footer) y tengo el problema que la capa de la columna central (que yo llamo "cuerpo"), a veces invade el espacio de la capa "right".

Eso sucede cuando lo que tengo en "cuerpo" es mas largo (en contenido) que lo que hay en "right" ... entonces se derrama alla! (gracias desde ya!!!)

A continuacion los CSS:

body {
text-align : center;
margin : 10px auto;
}

#header {
background : #ffffff;
color : inherit;
border : 0px dashed #ffffff;
clear : both;
margin : 0 0 0px 0px;
padding-botton : 10px;
}

#menudo {
background : #ffffff;
color : inherit;
border : 0px dashed #ffffff;
clear : both;
margin : 0 0 0px 0px;
padding-botton : 10px;
}

#left {
background : #efefef;
color : inherit;
border : 0px dashed #ffffff;
width : auto;
float : left;
text-align : left;
margin-left: 10px;
padding-right : 40px;
}

#right {
background : #efefef;
color : inherit;
border : 0px dashed #ffffff;
float : right;
text-align : left;
margin-right: 10px;
padding-left : 40px;
}

#cuerpo {
background : #efefef;
color : inherit;
border : 0px dashed #ffffff;
width : auto 650px;
margin : 30px 10px 50px 250px;
text-align : left;
padding-right : 30px;
}

#footer {
background : #c9c9c9;
color : inherit;
border : 0px dashed #ffffff;
clear : both;
height : 30px;
width : auto;
margin : 10px 0 0 0;
padding : 10px;
}

Italico76 · #2 (**permalink**) 14/11/2007, 07:55

Italico76 · #3 (**permalink**) 14/11/2007, 08:06

Si agrego la propiedad " overflow:hidden;" en #cuerpo .... en FireFox se arregla pero en IE.... empieza a derramar sobre e otro lado ("left")

Skizobass · #4 (**permalink**) 14/11/2007, 08:16

quizás es por los pixeles, revisa bien tu wireframe. (A las medidas le falta la terminacni px)
En tu header hay codigo mal escrito
padding-botton : 10px;

Debería ser BOTTOM

axz · #5 (**permalink**) 14/11/2007, 08:25

Italico76 te sigo desde el otro foro ... oye, aparte de lo que comenta Skizobass, tienes un error que bien puede afectar el identificador ID debe ser único en tu página, y el id widgetlo asignas varias veces, esto no debería, aunque claro, nunca lo usas en los estilos, pero cuidado ...

revisando ...

Italico76 · #6 (**permalink**) 14/11/2007, 08:31

Gracias chicos!!!!! ya corregi el problema ortografico.........y voy a hacer caso de no repetir el ID (aunque creia que eso era mejor para aplicar a todos las mismas propiedades)

Se me escapaban unos enlaces...y con DIV no los podia contener asi que hice la variacion reeemplazando DIV por TABLE y quedo asi (funcionando)

<table align='left' style='margin-top:25px; margin-left:25px; margin-right:25px;' >

bla bla bla (enlaces)

</table>

La tabla no tiene ni TR ni TD ni nada!!!!

axz · #7 (**permalink**) 14/11/2007, 08:37

Italico76, no desistas de usar DIVS, jeje, al principio cuesta, pero cuando le entiendes te facilita muchas cosas ... en cuanto a lo que dices de aplicar a varios contenedores el mismo estilo es más bien la propiedad class a la que te refieres, para hacer referencia a la clase en los estilos utiliza el punto (.) algo así:

Código HTML:

<style type="text/css">
.widget
{
  color: red;
  background-color: black;
}
</style>
...
<div class="widget">contenido widget</div>
<div class="widget">contenido widget</div>
...
<div class="widget">contenido widget</div>
<div class="widget">contenido widget</div>
...

Saludos, ¿quieres que le sigamos intentando con DIVS o mejor lo dejamos por el momento?