Div se sobrepone y no baja al agregar contenidos

MarioAlejandroCR2 · #1 (**permalink**) 10/10/2011, 03:46

Tengo un div de barra de fondo y uno de contenido dentro de el hay varios más pero el problema se da que no me baja el div de barra de fondo se me queda estatico, lo demás crece pero este div no baja con los demás: acá el código del div de fondo:

Código CSS:

Ver original.barabot {
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -ms-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    background: -moz-linear-gradient(top, #CDCDCD, #B7B7B7);
    background: -webkit-linear-gradient(top, #CDCDCD, #B7B7B7);
    background: -o-linear-gradient(top, #CDCDCD, #B7B7B7);
    background: -ms-linear-gradient(top, #CDCDCD, #B7B7B7);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#CDCDCD', endColorstr='#B7B7B7');
    height:20px;
    width:700px;
    position:absolute;
}

Y por si acaso los de div generales, el del div central, contiene todas las noticias y demás

Código CSS:

Ver original.divadd {
    /*Es uno de los estilos más importantes, su div de uso contiene la información mas relevante de la página*/
width:500px;
    background-color:#f0f0f0;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
    color: #003a50;
    margin:auto;
    alignment-adjust:central;
    padding-top:15px;
    padding-bottom:15px;
    line-height:20px;
    position:relative;
    margin-bottom:15px;
}

Y el del div megageneral, contiene a div barra superior, div barra inferior (problema) div general (ver arriba), etc, todo menos banner y menú.

Código CSS:

Ver original.divgral {
    /*Es uno de los estilos más importantes, es la parte principal izquierda dentro de el ira divadd*/
width:700px;
    background-color:#f0f0f0;
    float:left;
    font-family:"Century Gothic";
    font-size:14px;
    text-align:left;
}

Acá por si no me logran entender una imágen del problema:

IsaBelM · #2 (**permalink**) 10/10/2011, 04:30

no te he entendido, pero voy a suponer que lo que quieres es que el largo del bloque de la derecha, sea igual al largo del bloque de la izquierda

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<style type="text/css">
#caja_izq {
width: 850px;
margin: 20px auto;
color: navy;
background-color: yellow;
overflow: auto;
}

#caja_der {
width: 500px;
float: right;
background-color: pink;
border-left: solid 30px #FFF;
}

.columna_izquierda {
width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}

.columna_derecha {
width: 450px;
float: left;
padding: 20px;
}
</style>
</head>
<body>
<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum dolor sit amet, consectetuer adipiscing elit,
</div>
<div class="columna_derecha">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</body>
</html>

tunait · #3 (**permalink**) 10/10/2011, 04:47

¿cuál es la estructura en el html?

kseso? · #4 (**permalink**) 10/10/2011, 07:27

Cosas como:

Cita:

position:absolute; con alto (height) definido y
float:left /*o right*/

provocan la superposición de elementos de bloque.

Solución:
evitar el absoluto excepto en situaciones que lo requieran y conociendo de antemano todas las variables posibles y
limpiar float (para lo segundo). Busque por esa cadena de texto.