Tema: Modulo right se baja
Ver Mensaje Individual
  #23 (permalink)  
Antiguo 04/08/2011, 04:21
summermojito
 
Fecha de Ingreso: enero-2011
Ubicación: Madrid
Mensajes: 127
Antigüedad: 13 años, 11 meses
Puntos: 14
Respuesta: Modulo right se baja
En el ejemplo anterior no estaba del todo como tú querías. Te paso esta versión más acorde:

Te sugiero que copies todo este código y lo pegues en un nuevo archivo y que lo abras directamente a través del navegador para ver cómo queda.

Código HTML: 
Ver original
  1. <html>
  2. <style>
  3. /*Gutter Space */
  4. #content{
  5.   padding: auto;
  6.   margin: auto;
  7.   overflow:visible;
  8. }
  9.   
  10. #content_container{
  11.   padding: auto;
  12.   margin: auto;
  13.   width: 960px;
  14.   overflow:visible;
  15.   
  16.   }
  17.   
  18. /* Titulo modulos */
  19.  
  20. .lefti {
  21.     padding: 0px 20px 0px 20px;
  22.     color: #1d4674;
  23.     text-decoration: none;
  24.     font:normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
  25.     line-height: 40px;
  26.     font-weight:bold;
  27.     background: url(../images/menu_lefti.png) no-repeat; 
  28.     width: 228px;
  29.     /*clear:both;*/
  30. }  
  31. /* These styles create the Left Panel */
  32.  
  33. #left{
  34.   width:228px;
  35.   margin: 0px;
  36.   padding: 0px;
  37.   float: left;
  38. }
  39.  
  40. #left h3{
  41.   font: normal 22px/30px "Trebuchet MS", Georgia Arial, Helvetica, sans-serif;
  42.   color:#000;
  43.   letter-spacing:-0.5px;
  44.   padding:3px 0;
  45.   margin:0px;
  46. }
  47.  
  48. /* These styles create the Left Panel menus. */
  49.  
  50. #left ul.menu {
  51.   margin: 0;
  52.   padding: 0px 0px 40px 0px !important;
  53.   height: auto !important;
  54. }
  55.  
  56. #left ul.menu li {
  57.   list-style: none;
  58.   float: none !important;
  59.   border-bottom: 1px solid #ccc;
  60. }
  61. #left ul.menu li a {
  62.   display: block;
  63.   padding: 8px 0px 8px 25px;
  64.   color: #1d4674;
  65.   text-decoration: none;
  66.   line-height: normal !important;
  67.   font-weight:normal;
  68.   background-image:url(../images/bullet1.gif);
  69.   background-repeat: no-repeat;
  70.   background-position: left center;
  71. }
  72. #left ul.menu li a:hover {
  73.   background-image:url(../images/bullet2.gif);
  74.   background-repeat: no-repeat;
  75.   background-position: left center;
  76.   border: none;
  77.   color: #000;
  78. }
  79.  
  80. #gutter{
  81.   width: 20px;
  82.   height: 20px;
  83.   margin: 0px;
  84.   padding: 0px;
  85.   float: left;
  86.  
  87. }
  88.  
  89. /* These styles create the Right Panel */
  90.  
  91. #right{
  92.   width:712px;
  93.   margin: 0px;
  94.   padding: 0px;
  95. }
  96.  
  97. #right h2, #right h2 a{
  98.   font: normal 22px/30px "Trebuchet MS", Georgia Arial, Helvetica, sans-serif;
  99.   color:#195394;
  100.   letter-spacing:-0.5px;
  101.  
  102.   border-bottom: 1px solid #999999;
  103.  
  104.     padding:0px 0px 4px 0px;
  105.   margin:0px 0px 0px 0px;
  106. }
  107.  
  108.  
  109.  
  110. #right div.item{
  111.   width:220px;
  112.   float:left;
  113.   margin: 5px 17px 5px 0px;
  114.   border-bottom: 1px solid #999999;
  115. }
  116. </style>
  117. <!--Page Content Area----------------------------------> 
  118. <div id="content"> 
  119. <div id="content_container"> 
  120.     <div class="lefti"> 
  121.         <div style="float:left;">Servicios:
  122.             <div id="left"> 
  123.                 <div class="moduletable">       
  124.                     <ul class="menu"> 
  125.                         <li id="item-108"><a href="/magar/index.php/laboral" >Laboral</a></li>
  126.                     </ul>
  127.                 </div> 
  128.             </div>
  129.        </div>
  130.        <div id="right"> 
  131.            <!--breadcrumbs----------------------------------> 
  132.            <div id="breadcrumbs"></div> 
  133.                <!--MAIN CONTENT----------------------------------> 
  134.                <div class="item-page"> 
  135.                    <h2> Inicio      </h2> 
  136.                    <p>Prueba Inicio</p> 
  137.                </div> 
  138.            </div> 
  139.        </div> 
  140.     </div> 
  141. <!--<div id="gutter"></div>-->
  142. </div>
  143.  
  144. </html>

Saludos!
__________________
Ayudas Accesibilidad

Faston