Organización y tamaño de divs

Citar

Escrito el 09 Ene 2010 06:36 am

Hola, estoy intentando hacer un sitio web pero no he podido organizar bien los divs, la página esta organizada por varios divs, dos de ellos son los principales que estan en el centro, uno a la izquierda, pequeño, otro a la derecha, para que se viera bien en cualquier pantalla no puse sus tamaños en pixeles sino en porcentaje, el div pequeño width:28%; y el grande width:72%;..... el div izquierdo tiene un reproductor mp3, un swf, obviamente no se escala, asi que decidi poner un tamaño estático al div izquierdo, pero el problema es que si el tamaño de el div izquierdo es un valor estático, cuando se reescala la ventana del navegador llega al punto en que el div derecho se baja, es decir, queda por debajo de el div izquierdo y no quiero que suceda eso

, alguien me puede decir cómo hacer para evitar que un div quede por debajo de otro verticalmente?
aca esta el código:

index.php:

Código HTML :

<!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" />
<link rel="shortcut icon" href="logos/canaldebendicion.ico" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<title>Canal de Bendici&oacute;n | Inicio</title>
<?php
  $imgs = array("indexImg/image.jpg","indexImg/image2.jpg","indexImg/image3.jpg","indexImg/image4.jpg");
  shuffle($imgs);
?>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head>

<body>

<div id="container">
    <div class="top">
       <center><img src="CSS/indexBanner.jpg" width="1005" height="102" /></center>
    </div>
    
  <div class="inf_izq">
    <img src="<?php echo $imgs[0]; ?>" width="96%"/>
    <p></p>
    <?php
    $open = fopen("versiculo.txt", "r");
   echo "<b class='versiculoTitle'>versículo del día:</b><br />";
   while(!feof($open)){
      $tell = fgets($open, 999);
      echo "<p class='versiculoBody'>$tell</p><br />";
   }
   ?>
    <p></p>
    <p>
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','265','height','96','src','reproductor','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','reproductor' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="220" height="96">
        <param name="movie" value="reproductor.swf" />
        <param name="quality" value="high" />
        <embed src="reproductor.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="265" height="96"></embed>
      </object></noscript>
    </p>
    
  </div>
    <div class="inf_der">
       <div class="bodyDiv">
          <p class="bodyTitle">Bienvenidos</p>
          <p class="bodyText">Canal de Bendición</p>
          <img src="Logos/logoFourSquare.jpg" width="28%"/><br />
          <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','335','height','325','src','enesVideo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','enesVideo' ); //end AC code
      </script>
    <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="335" height="325">
      <param name="movie" value="enesVideo.swf" />
      <param name="quality" value="high" />
      <embed src="enesVideo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="335" height="325"></embed>
    </object>
    </noscript>
       </div>
       
  </div>
<div id="footer">
      <p class="footerText">&nbsp;<a class="foot" href="http://www.jonathancastro.zxq.net">Jonathan Castro | Dise&ntilde;o Web | Programaci&oacute;n</a></p>
   </div>
</div>

</body>
</html>

y aqui style.css:

Código HTML :

@charset "utf-8";
/* CSS Document */

body{
background:url(background.jpg);
margin:0px;
padding:0px;
}
.root{
border-collapse:collapse;
}
.versiculoTitle{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
color:#005500;
}
.versiculoBody{
font:12px Arial, Helvetica, sans-serif;
color:#006600;
}
.inf_izq{
background:url(bg1.jpg);
width: 282px;
float: left;
height:700px;
}
.inf_der{
background:url(centeredImg.jpg);
width:72%;
float:right;
height:700px;
}
.container{
width:100%;
height:100%;
}
.top{
width:100%:
}
.bar{
height:45px;
background:url(barBg.jpg);
width:100%;
}

.footerText{
font:14px Arial, Helvetica, sans-serif;
color:#222222;
padding-top:12px;
}
.foot{
text-decoration:none;
color:#222222;
}
.foot:hover{
color:#000000
}
#footer{
background:url(bottom.jpg) repeat-x top white;
margin-top:710px;
margin-bottom:-300px;
width:100%;
height:36px;
}
.bodyTitle {
font:22px Georgia, "Times New Roman", Times, serif;
color: #006600;
}
.bodyText{
font:14px arial;
line-height:24px;
color:#333333;
}
.bodyDiv{
padding-left:80px;
padding-top:20px;
}

espero me puedan ayudar

Muchas gracias!
Hasta Luego!

Por hormy1

Claber

124 de clabLevel

Envíale un mensaje privado Email

Organización y tamaño de divs

Escribe una respuesta rapida