Tema: Problema con div se superponen
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/06/2013, 16:07
kenyis
 
Fecha de Ingreso: marzo-2010
Mensajes: 25
Antigüedad: 14 años, 1 mes
Puntos: 0
Problema con div se superponen
Hola buenos días, tengo un problema con el cual me podrían ayudar. Estoy haciendo una web con porcentajes para que se vaya ajustando mientras mas chica es la pantalla. Mi problema es que el div del menu cuando se va achicando queda debajo del div con el contenido. Alguien sabe como arreglar eso? Necesitaria que el div del contenido quede DEBAJO automaticamente. les dejo el código.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  
  6.         <title>Club de Danza</title>
  7.         
  8.         <meta name="description" content="" />
  9.         <meta name="keywords" content="" />
  10.         
  11.         <link href='img/favicon.png' rel='shortcut icon' type='image/png'/>
  12.         
  13.         <link rel="stylesheet" href="css/reset.css" media="all" />
  14.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  15.         
  16.     </head>
  17. <body>
  18.     <div class="mainWrap">
  19.         <div id="pinkbar">
  20.             <div class="leftCol">
  21.                 <h1 id="pageLogo">
  22.                     <a href="index.html">Club de Danza</a>
  23.                 </h1>
  24.             </div>
  25.             
  26.             <div id="rightCol">
  27.                 <div id="searchbar">
  28.                     <form action="/search" id="sidebar_search" method="get">
  29.                         <input autocomplete="off" class="search_input" name="query" placeholder=" Buscar artistas y estudios">
  30.                         <button class="search_button" type="submit" title="Buscar artistas y estudios">Buscar artistas y estudios</button>
  31.                     </form>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.         
  36.         <div id="menuBar">
  37.             <ul>
  38.                 <li><a href="#" class="current">Inicio <span class="separador">|</span></a></li>
  39.                 <li><a href="#">Artistas <span class="separador">|</span></a></li>
  40.                 <li><a href="#">Audiciones y Convocatorias <span class="separador">|</span></a></li>
  41.                 <li><a href="#">Clasificados <span class="separador">|</span></a></li>
  42.                 <li><a href="#">Cursos y Talleres</a></li>
  43.             </ul>
  44.         </div>
  45.         
  46.         <div id="mainContent">
  47.             <div id="mainContentLeft">
  48.                 <div class="article">
  49.                     <div class="articleImg"><img src="images/articulos/203693_7593.jpg" width="218" height="145" alt="articleImg"/></div>
  50.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  51.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  52.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  53.                     <a href="#">Leer m&aacute;s</a>
  54.                 </div>
  55.                 
  56.                 <div class="article">
  57.                     <div class="articleImg"><img src="images/articulos/732197_26596117.jpg" width="218" height="145" alt="articleImg"/></div>
  58.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  59.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  60.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  61.                     <a href="#">Leer m&aacute;s</a>
  62.                 </div>
  63.                 
  64.                 <div class="article">
  65.                     <div class="articleImg"><img src="images/articulos/736302_32713694.jpg" width="218" height="145" alt="articleImg"/></div>
  66.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  67.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  68.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  69.                     <a href="#">Leer m&aacute;s</a>
  70.                 </div>
  71.                 
  72.                 <div class="article">
  73.                     <div class="articleImg"><img src="images/articulos/750900_91551630.jpg" width="218" height="145" alt="articleImg"/></div>
  74.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  75.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  76.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  77.                     <a href="#">Leer m&aacute;s</a>
  78.                 </div>
  79.                 
  80.                 <div class="article">
  81.                     <div class="articleImg"><img src="images/articulos/1069896_60158036.jpg" width="218" height="145" alt="articleImg"/></div>
  82.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  83.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  84.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  85.                     <a href="#">Leer m&aacute;s</a>
  86.                 </div>
  87.                 
  88.                 <div class="article">
  89.                     <div class="articleImg"><img src="images/articulos/1386581_51264205.jpg" width="218" height="145" alt="articleImg"/></div>
  90.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  91.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  92.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  93.                     <a href="#">Leer m&aacute;s</a>
  94.                 </div>
  95.             </div>
  96.             <!-- end mainContentLeft-->
  97.         
  98.         
  99.     </div>


Código CSS: 
Ver original
  1. body {
  2.     color: #333;
  3.     direction: ltr;
  4.     font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
  5.     font-size: 11px;
  6.     line-height: 1.28;
  7.     text-align: left;
  8. }
  9. #mainWrap {
  10.     width:100%;
  11.     height:100%;
  12.     overflow:hidden;
  13.     position:relative;
  14. }   
  15. #pinkbar {
  16.     background-color:#e0104c;
  17.     /*
  18.     background-image:url(../images/colorbanner.jpg); */
  19.     background-repeat:repeat-x;
  20.     height:45px;
  21.     position:fixed;
  22.     width:100%;
  23. }
  24. #pageLogo {
  25.     float:left;
  26.     padding-top:10px;
  27.     padding-left:10px;
  28. }
  29. #pageLogo a {
  30.     background-image:url(../images/club.png);
  31.     background-repeat:no-repeat;
  32.     background-size: auto;
  33.     display:block;
  34.     height:26px;
  35.     outline:none;
  36.     overflow:hidden;
  37.     text-indent:-999px;
  38.     white-space:nowrap;
  39.     width:180px;
  40. }
  41. #searchbar {
  42.     float:right;
  43.     padding-top:12px;
  44.     padding-right:10px;
  45.     height:21px;
  46. }
  47. #searchbar input{
  48.     border:none;
  49.     height:19px;
  50.     margin-right:-4px;
  51.     min-width:300px;
  52. }
  53. .search_button {
  54.     background-image:url(../images/lupa.jpg);
  55.     background-repeat:no-repeat;
  56.     border:none;
  57.     cursor:pointer;
  58.     height:21px;
  59.     text-indent:-999px;
  60.     width:24px;
  61.     z-index:50;
  62. }
  63. /* menuBar 02 */
  64. #menuBar {
  65.     background-color:#f5f5f5;
  66.     display:block;
  67.     font-size:19px;
  68.     font-weight:normal;
  69.     font-family:'Helvetica',tahoma,verdana,arial,sans-serif;
  70.     width: 100%;
  71.     min-height:52px;
  72.     position:absolute;
  73.     margin:45px auto;
  74.     clear:both;
  75.     }
  76. #menuBar ul {
  77.     margin:0 0 0 43px;
  78.     padding:0;
  79.     list-style-type:none;
  80.     }
  81. #menuBar ul li {
  82.     display:block;
  83.     float:left;
  84.     margin:10px 0 0 0;
  85.     }
  86. #menuBar ul li a {
  87.     display:block;
  88.     float:left;
  89.     color:#e2104d;
  90.     text-decoration:none;
  91.     padding:0px 13px 0 0px;
  92.     }
  93. #menuBar ul li a:hover {
  94.     color:#e2104d;
  95.     }
  96. #menuBar ul li a.current {
  97.     color:#000;
  98.     }
  99. .separador {
  100.     color:#c8c8c8;
  101. }
  102. #menuBar img{
  103.     padding-top:6px;
  104.     padding-left:73px;
  105. }
  106. #searchContent {
  107.     float:left;
  108.     padding-left:819px;
  109.     padding-top:15px;
  110. }
  111. .enter_button {
  112.     background-image:url(../images/entrar.jpg);
  113.     background-repeat:no-repeat;
  114.     border:none;
  115.     cursor:pointer;
  116.     height:41px;
  117.     text-indent:-999px;
  118.     width:101px;
  119. }
  120. /* End menuBar styles */
  121.  
  122. /* mainContent 03 */
  123. #mainContent {
  124.     /* background:url("../images/patronescs4-01.png")no-repeat; */
  125.     width:100%;
  126.     margin:0px auto;
  127. }
  128. #mainContentLeft {
  129.     background-color:#efedee;
  130.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  131.     size:9px;
  132.     width:75%;
  133.     height:auto;
  134.     top:97px;
  135.     float:left;
  136.     position:absolute;
  137. }
  138. .article {
  139.     background-color:#efedee;
  140.     width:218px;
  141.     height:234px;
  142.     margin:9px 0 0 9px;
  143.     float:left;
  144.     margin-top:9px;
  145. }
  146. .articleImg {
  147.     width:218px;
  148.     height:145px;
  149.     padding-top:5px;
  150.     position:relative;
  151. }
  152. .articleEpigrafe {
  153.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  154.     font-size:9px;
  155.     background-color:#e0104c;
  156.     width:213px;
  157.     position:absolute;
  158.     margin-top:-14px;
  159.     padding-left:5px;
  160. }
  161. .articleTitulo {
  162.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  163.     font-size:12px;
  164.     font-weight:bold;
  165.     padding-left:5px;
  166.     position:absolute;
  167.     padding-top:5px;
  168. }
  169. .article p {
  170.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  171.     font-size:10px;
  172.     padding-left:5px;
  173.     position:relative;
  174.     padding-top:15px;
  175. }
  176. .article a{
  177.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  178.     font-size:10px;
  179.     font-style:italic;
  180.     color:#00bbd2;
  181.     padding-left:160px;
  182.     text-decoration:none;
  183. }
  184. .article a:hover{
  185.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  186.     font-size:10px;
  187.     font-style:italic;
  188.     color:#00bbd2;
  189.     padding-left:160px;
  190.     text-decoration:underline;
  191. }
  192. /* End mainContent */

Saludos y gracias por la ayuda.