Tema: Problema con posicion de divs dentro de div
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/06/2011, 06:56
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 9 meses
Puntos: 192
Respuesta: Problema con posicion de divs dentro de div
Que posicionamiento más extraño estás utilizando :P ¿No sería MUCHO más fácil y efectivo con flotados?

Así: http://jsbin.com/ovefe5

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>Proyecto de prueba css</title>
  7. <style>
  8.   /* limpiar el flotado */
  9.   .clearfix{zoom:1;} 
  10.   .clearfix:after{
  11.     content:'.';
  12.     display:block;
  13.     clear:both;
  14.     height:0;
  15.     line-height:0;
  16.     visibility:hidden;
  17.   }
  18.  
  19.   /* flotar a la izquierda */
  20. #botones{
  21.   border: 1px solid black;
  22.   width: 20%;
  23.   margin:5px;
  24.   float:left;
  25. }
  26.  
  27. #botones ul{
  28.   list-style-type: none;
  29. }
  30.  
  31.   /* flotar a la derecha */
  32. #contenido{
  33.   border: 1px solid black;
  34.   width: 77%;
  35.   margin: 5px;
  36.   float:right;
  37. }
  38.  
  39. #contenedor{
  40.   color:red;
  41.   border: 2px solid black;
  42.   width: 780px;
  43.   margin: 0 auto;
  44. }
  45.         </style>
  46.     </head>
  47.     <body>
  48.         <div id="contenedor" class="clearfix">
  49.           <div id="botones">
  50.             <ul>
  51.               <li><a href="#">link 1</a></li>
  52.               <li><a href="#">link 2</a></li>
  53.               <li><a href="#">link 3</a></li>
  54.             </ul>
  55.           </div>
  56.           <div id="contenido">
  57.             <p>Contenido alineado a la derecha de los botones!!
  58.             <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
  59.             Fin del contenido </p>
  60.           </div>  
  61.         </div>
  62.     </body>
  63. </html>
__________________
nahueljose.com.ar