Div de manera automatica y auto ajustable

jimadri · #1 (**permalink**) 07/02/2012, 06:43

Hola necesito saber como se logra que el alto de un DIV sea automatico en cualquier navegador ya que en el IE lo veo como quiero pero no asi con otros donde el DIV en cuestion no se adapta al largo del contenido.

Qué debo hacer?

pitufoweb · #2 (**permalink**) 07/02/2012, 06:51

Los div's al igual que muchos otros elementos, crecen de manera automática sin hacer nada en especial...esa es su naturaleza.

Saludos

jimadri · #3 (**permalink**) 07/02/2012, 07:05

Ok, pero por qué no se ven de igual manera en todos los navegadores?

pitufoweb · #4 (**permalink**) 07/02/2012, 07:15

Lo mas probable es que algo lo esta impidiendo. Si no muestras el código, no podremos saber cual es el problema.

saludos

jimadri · #5 (**permalink**) 07/02/2012, 07:26

Código PHP:

 
<!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=iso-8859-1" /> 
    <title>Red Social de la Ciudad</title> 
    <style type="text/css"> 
        #cabecera 
        { 
            background-color:#FF0; 
            width:964px; 
            margin-left:auto; 
            margin-right:auto; 
            height:82px;     
            border:1px solid #808080; 
        } 
         
        #medio 
        { 
            width:964px; 
            margin-top:5px; 
            margin-left:auto; 
            margin-right:auto; 
            height:750px; 
        } 
         
        #logo 
        { 
            position:relative; 
            background-color:inherit; 
            height:72px; 
            width:72px; 
            top:5px; 
            bottom:5px; 
            left:5px; 
            font:bold; 
            font-size:large; 
            font-stretch:condensed; 
        } 
         
        #intermedio 
        { 
            position:relative; 
            float:left; 
            width:769px; 
            min-height:750px; 
            height:auto; 
        } 
         
        #barramenu 
        { 
            position:relative; 
            float:left; 
            background-color:#FF0; 
            width:175px; 
            height:700px; 
            border:1px solid #808080; 
            padding:5px;     
        } 
         
        .cuerpo 
        { 
            position:relative; 
            background-color:#FF0; 
            width:564px; 
            float:right; 
            min-height:700px; 
            height:auto; 
            border:1px solid #808080; 
            padding:5px; 
        } 
         
        #barrasecund 
        { 
            position:relative; 
            float:right; 
            background-color:#FF0; 
            width:175px; 
            height:700px; 
            border:1px solid #808080; 
            padding:5px;     
        } 
         
        .post 
        { 
            margin-top:5px; 
            background-color:#FFF; 
            position:relative; 
            width:552px; 
            min-height:190px; 
            height:auto; 
            overflow:visible; 
            border:1px solid #808080; 
            padding:5px; 
        } 
        .divisor 
        { 
            background-color::#FF0; 
            position:relative; 
            width:48px; 
            height:10px; 
        } 
        .izq 
        { 
            background-color:#FFF; 
            position:relative; 
            float:left; 
            width:90px; 
            min-height:180px; 
            overflow:visible; 
            border:1px solid #808080; 
        } 
        .der 
        { 
            background-color:#FFF; 
            position:inherit; 
            float:right; 
            width:450px; 
            min-height:180px; 
            height:auto; 
            overflow:visible; 
            border:1px solid #808080; 
        } 
        .logo2 
        { 
            background-color:#3FF; 
            position:relative; 
            margin-left:auto; 
            margin-right:auto; 
            width:80px; 
            height:80px; 
        } 
        .bco 
        { 
            background-color::#FF0; 
            position:relative; 
            width:80px; 
            min-height:90px; 
            height:auto; 
        } 
        .cont 
        { 
            background-color:#C90; 
            position:relative; 
            width:440px; 
            min-height:100px; 
            overflow:visible; 
            padding:5px; 
        } 
        .mens 
        { 
            background-color:#F9F; 
            position:relative; 
            width:440px; 
            min-height:35px; 
            height:auto; 
            padding:5px; 
            margin-top:5px; 
        } 
        .fecha 
        { 
            position:relative; 
            width:420px; 
            height:10px; 
        } 
        .cuerp 
        { 
            position:relative; 
            width:420; 
            margin-top:10px; 
            min-height:80px; 
            overflow:visible; 
        } 
 
    </style> 
</head> 
 
<body> 
    <div id="cabecera"> 
        <div id="logo"> 
            RSC 
        </div> 
    </div>  
     
    <div id="medio"> 
        <div id="intermedio"> 
            <div id="barramenu"> 
            </div> 
     
            <div class="cuerpo" id="cuerpo"> 
                <?php 
    include "../conecciones/conexionwebfm.php"; 
     
    $conspost = mysql_query("select * from posteos order by idpost desc", $coneccionwebfm) or die ("no se consultaron post ".mysql_error()); 
    $p = 0;     
    while ($post = mysql_fetch_array($conspost)) 
    { 
        $ndivp = "post".$p; 
        $ndivi = "izq".$p; 
        $ndivd = "der".$p; 
        $ndivl = "log".$p; 
        $ndivc = "cont".$p; 
        $ndivm = "mens".$p; 
         
        $tipost = $post['tipo']; 
        $idpost = $post['idnota']; 
         
        if ($tipost == 2) 
        { 
            $consefe = mysql_query("select * from efemerides where idefe = $idpost", $coneccionwebfm) or die ("no se trajo efemeride ".mysql_error()); 
            $efe = mysql_fetch_array($consefe); 
            $dia = $efe['dia']; 
            $anio = $efe['anio']; 
            $cuerpo = $efe['cuerp']; 
             
            $fechaefe = $dia[2].$dia[3]."/".$dia[0].$dia[1]."/".$anio; 
             
            $idefe = $efe['idefe']; 
?> 
                <div class="post" id="<?php echo "$ndivp"; ?>"> 
                    <div class="izq" id="<?php echo "$ndivi"; ?>"> 
                        <div class="logo2" id="<?php echo "$ndivl"; ?>"></div> 
                        <div class="bco"></div>  
                    </div> 
                    <div class="der" id="<?php echo "$ndivd"; ?>"> 
                        <div class="fecha"><?php echo "$fechaefe"; ?></div> 
                        <div class="cuerp"><?php echo "$cuerpo"; ?></div> 
                        <div class="mens" id="<?php echo "$ndivm"; ?>"></div>  
                    </div> 
                </div> 
                <div class="divisor"> 
                </div> 
<?php 
        } 
         
        $p++; 
    } 
    mysql_close($coneccionwebfm); 
?> 
            </div> 
        </div> 
         
        <div id="barrasecund"> 
        </div> 
    </div> 
     
    <div id="pie"> 
    </div> 
 
</body> 
</html>

pitufoweb · #6 (**permalink**) 07/02/2012, 07:55

Cuando abro tu código en el navegador aparece esto:

Que es exactamente lo que quieres hacer?

Saludos

jimadri · #7 (**permalink**) 07/02/2012, 08:11

Como veras en este ejemplo nuestro, en el segundo box ya tenemos el desorden. Se entiende?

pitufoweb · #8 (**permalink**) 07/02/2012, 08:25

Eso pasa por que tienes los elementos flotados.

Para solucionar eso, usa overflow:auto en la class .post

P.D. Tienes algunos errores en tu código CSS. Usa el validador para encontrarlos.

Saludos

jimadri · #9 (**permalink**) 07/02/2012, 08:39

Cita:

Iniciado por pitufoweb

Eso pasa por que tienes los elementos flotados.

Para solucionar eso, usa overflow:auto en la class .post

P.D. Tienes algunos errores en tu código CSS. Usa el validador para encontrarlos.

Saludos

MUCHAS GRACIAS! Funcionó con el "auto". Era lo que necesitaba!