Distancia desde el top variable segun el contenido

[IssuesGirl]

Hola a todos...

Tengo el siguiente problema:

Tengo 3 divs modulo_1, modulo_2 y pie...

El modulo_1 tiene un valor top predefinido y una altura (height) que varia según el contenido que se coloque en este div, necesito que el div modulo_2 esté exactamente 30px por debajo del modulo_1 sin importar que altura tenga.

Igualemnte el div pie debe estar 30px por debajo de el modulo_2 sin importar que altura tengan ninguno de los 2 anteriores...

Esto lo necesito hacer en una plantilla que estoy usando en joomla

Espero haberme explicado bien y que alguien pueda ayudarme.

Muchas Gracias

[webfreelance]

Quizá te sirva darle un margin-top a cada DIV:

Código CSS:

#modulo_2 {
   margin-top: 30px;
}
#pie {
   margin-top: 30px;
}
 

¿?

Saludos!

[IssuesGirl]

no... ya lo intente y no funciono

[ArturoGallegos]

muestra tu código HTML y CSS (nada de PHP o ASP) para no jugar a las adivinanzas

[IssuesGirl]

Código HTML:

<!--Comienza Contenedor-->
<div id="contenedor">
 
<!--Comienza Barra Top-->
  <div id="barra_top">
    <jdoc:include type="modules" name="top" style="xhtml" />
  </div>
<!--Termina Barra Top-->
 
<!--Comienza Top-->
  <div id="top">
  <img src="templates/<?php echo $this->template ?>/images/top.png" width="1100" height="283" alt="" title="" />
 
  </div>
<!--Termina Top-->
 
<!--Comienza Botonera-->
    <div id="botonera">
      <jdoc:include type="modules" name="menu" style="xhtml" />
      
    
     
      
  </div>
<!--Termina Botonera-->
 
<!--Comienza Contenido-->
  <div id="contenido">
  
  <!--Comienza Modulo 1-->
    <div id="modulo_1">
    
    <!--Comienza Top Modulo-->
      <div id="top_modulo">
      </div>
    <!--Termina Top Modulo--> 
    
    <!--Comienza Contenido Modulo-->
      <div id="contenido_modulo_1" align="center">
      
 
<jdoc:include type="component" />
      </div>
    <!--Termina Contenido Modulo--> 
    
    <!--Comienza Abajo Modulo-->
      <div id="abajo_modulo">
      </div>
    <!--Termina Abajo Modulo--> 
    
    </div>
  <!--Termina Modulo 1-->
  
  <!--Comienza Modulo 2-->
    <div id="modulo_2">
    
    <!--Comienza Top Modulo-->
      <div id="top_modulo">
      </div>
    <!--Termina Top Modulo--> 
    
    <!--Comienza Contenido Modulo-->
      <div id="contenido_modulo_2" align="center">
        
            
      <!-- Comienza Inicio de Sesion-->
        <div id="medio_modulo_1">
        
        <?php if($this->countModules('user1')) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
        </div>
      <!-- Termina Inicio de Sesion-->
      
      <!--Comienza Info del Cliente-->
        <div id="medio_modulo_2">
        
         <?php if($this->countModules('user2')) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
 
                  
        </div>
      <!--Termina Info del Cliente-->
            
      </div>
    <!--Termina Contenido Modulo--> 
    
    <!--Comienza Abajo Modulo-->
      <div id="abajo_modulo">
      </div>
    <!--Termina Abajo Modulo--> 
    
    </div>
  <!--Termina Modulo 2-->
  
  
  </div>
<!--Termina Contenido--> 
 
<!--Comienza Barra Lateral-->
  <div id="barra_lateral">
  
  <!--Comienza Top Barra Lateral-->
    <div id="top_barra_lateral">
    </div>
  <!--Termina Top Barra Lateral-->
  
  <!--Comienza Contenido Barra Lateral-->
    <div id="contenido_barra_lateral">
      
    <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  <!--Termina Contenido Barra Lateral-->
  
  <!--Comienza Abajo Barra Lateral-->
    <div id="abajo_barra_lateral">
    </div>
  <!--Termina Abajo Barra Lateral-->
  
  </div>
<!--Termina Barra Lateral-->
 
<!--Comienza Barra Pie-->
  <div id="barra_pie">
  
  <?php if($this->countModules('bottom')) : ?>
<jdoc:include type="modules" name="bottom" style="xhtml" />
<?php endif; ?>
 
  
  </div>
<!--Termina Barra Pie-->
 
</div>
<!--Termina Contenedor-->
 

[IssuesGirl]

Código CSS:

/* Estilos Generales*/
 
body {
    background-color: #791517;
    background-image: url(../images/fondo.jpg);
    background-repeat: repeat-x;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:15px;
    color:#666;
    margin-top: 5px;
    margin-bottom: 5px;
}
#contenedor {
    position: relative;
    width:1100px;
    height:100%;
    display: block;
    clear: both;
    margin:0 auto;
    z-index: 1;
}
#barra_top {
    background-color: #b1ab58;
    height: 40px;
    position:absolute;
    top: 0px;
    position:absolute;
    width: 1100px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px;
}
#top {
    position: absolute;
    top: 40px;
    height: 283px;
    width: 1100px;
    align: center;
}
 
#contenido {
    position: absolute;
    width: 865px;
    top: 400px;
    left: 10px;
}
#top_modulo {
    height: 30px;
    background-image:url(../images/top_modulo.png);
    background-repeat: no-repeat;
}
/*#contenido_modulo {
    position: absolute;
    height: 400px;
    width: 857px;
    height: auto;
    top: 30px;
    left: 3px;
    background-image:url(../imagenes/contenido_modulo.png);
    background-repeat:repeat-y;
}*/
#abajo_modulo {
    height: 30px;
    background-image:url(../images/abajo_modulo.png);
    background-repeat: no-repeat;
}
#modulo_1 {
    z-index: 10;
}
#contenido_modulo_1 {
    background-image:url(../images/contenido_modulo.png);
    background-repeat:repeat-y;
}
#modulo_2 {
    z-index: 10;
}
#contenido_modulo_2 {
    background-image:url(../images/contenido_modulo.png);
    background-repeat:repeat-y;
}
#medio_modulo_1 {
 
    width: 430px;
    float: left;
}
#medio_modulo_2 {
 
    width: 430px;
    float: right;
}
 
 
/* Estilos Barra Lateral del Home*/
 
#barra_lateral {
    width: 200px;
    position: absolute;
    top: 323px;
    right: 20px;
}
#top_barra_lateral {
    background-image: url(../images/top_barra_lateral.png);
    background-repeat: no-repeat;
    height: 26px;
}
 
#contenido_barra_lateral {
    background-image: url(../images/contenido_barra_lateral.png);
    background-repeat:repeat-y;
    width: 200px;
    text-align: justify;
}
 
#abajo_barra_lateral {
    background-image: url(../images/abajo_barra_lateral.png);
    background-repeat: no-repeat;
    height: 26px;
 
    /*top: 198px;*/
}
 
#barra_pie {
    top: auto;
    height: 40px;
    width: 1100px;
    background-color: #b1ab58;
    border-radius: 10px;
}
 
.titulo {
    font-size: 20px;
    font-weight: bold;
    color: #611313;
    text-decoration: underline;
    text-align: justify;
    text-indent: 30px;
}
.titulo2 {
    font-size: 16px;
    font-weight: bold;
    color: #611313;
    text-decoration: underline;
    text-align: justify;
    text-indent: 10px;
}
.texto {
    text-indent: 30px;
    font-size: 15px;
    text-align:justify;
}
.texto2 {
    text-indent: 20px;
    font-size: 15px;
    color:#511E1A;
    font-weight:bold;
}
.texto3 {
    text-indent: 20px;
    font-size: 15px;
    color:#791517;
}
.boton {
    font-size: 15px;
    font-weight: bold;
    color: #611313;
    text-align: center;
}
a {
    font-size: 15px;
    color: #611313;
    font-weight: bold;
    text-decoration: underline;
}
a:visited {
    color: #333;
}
a:hover {
    color: #333;
    text-decoration: underline;
}
a:active {
    color: #611313;
}
.inputbox {
    background-color: #511E1A;
    padding-left: 10px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    color:#FFF;
}
 
h2 {
    color: #611313;
}
 
h2 {
    border-bottom-color: #511E1A;
    display: block;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
h3 {
    border-bottom-color: #511E1A;
    display: block;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
 
.moduletable_menu {
    width: 162px;
}
 
/* VirtueMart*/
 
#med_ele{
    width: 810px;
}
 
#vmMainPage{
    width: 810px;
}
 
#med_ele .shop_info{
    width: 810px;
}
 
#contenido_barra_lateral .moduletable {
    width: 162px;
}