Modulo right se baja

[floyd_23]

Hola,

Estoy intentando editar una plantilla de joomla. Quería cambiar la forma en la que aparecían los títulos de los módulos así que he creado una capa con las propiedades que me gustaría que tuviese el titulo del módulo, pero algo me falta, o algo tengo mal puesto.

El titulo "Servicios:" sale en la posición correcta, pero el modulo "Inicio" se desplaza hacia abajo. Me gustaría saber porqué pasa esto y que me ayudaran a resolverlo. Aquí os copio el código y una captura del estado actual de la página para que vean lo que sucede.



Y aquí el código HTML:

Código HTML:

<div id="content">
  <div id="content_container">
    <div class="lefti">
    Servicios:
    </div>
    <div id="left">
    <jdoc:include type="modules" name="position-7" style="xhtml" />
    </div>
    <div id="gutter"></div>
    <div id="right">
    <!--breadcrumbs---------------------------------->
    <div id="breadcrumbs"><jdoc:include type="modules" name="position-2" style="xhtml" /></div>
        <!--MAIN CONTENT---------------------------------->
        <jdoc:include type="component" />
    </div>
  </div>
</div> 

Aquí os dejo el CSS:

Código:

/* Content Styling
------------------------------------------------------*/  

#content{
  padding: auto;
  margin: auto;
  overflow:visible;
}
  
#content_container{
  padding: auto;
  margin: auto;
  width: 960px;
  overflow:visible;
  
  }
  
/* Titulo modulos */

.lefti {
    padding: 0px 20px 0px 20px;
    color: #1d4674;
    text-decoration: none;
    font:normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 40px;
    font-weight:bold;
    background: url(../images/menu_lefti.png) no-repeat; 
    width: 228px;
    clear:both;
}  
/* These styles create the Left Panel */

#left{
  width:228px;
  margin: 0px;
  padding: 0px;
  float: left;
}

#left h3{
  font: normal 22px/30px "Trebuchet MS", Georgia Arial, Helvetica, sans-serif;
  color:#000;
  letter-spacing:-0.5px;
  padding:3px 0;
  margin:0px;
}

/* These styles create the Left Panel menus. */

#left ul.menu {
  margin: 0;
  padding: 0px 0px 40px 0px !important;
  height: auto !important;
}

#left ul.menu li {
  list-style: none;
  float: none !important;
  border-bottom: 1px solid #ccc;
}
#left ul.menu li a {
  display: block;
  padding: 8px 0px 8px 25px;
  color: #1d4674;
  text-decoration: none;
  line-height: normal !important;
  font-weight:normal;
  background-image:url(../images/bullet1.gif);
  background-repeat: no-repeat;
  background-position: left center;
}
#left ul.menu li a:hover {
  background-image:url(../images/bullet2.gif);
  background-repeat: no-repeat;
  background-position: left center;
  border: none;
  color: #000;
}

Código:

/*Gutter Space */

#gutter{
  width: 20px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  float: left;

}

/* These styles create the Right Panel */

#right{
  width:712px;
  margin: 0px;
  padding: 0px;
  float: left;
}

#right h2, #right h2 a{
  font: normal 22px/30px "Trebuchet MS", Georgia Arial, Helvetica, sans-serif;
  color:#195394;
  letter-spacing:-0.5px;
  padding:0px 0px 8px 0px;
  margin:0px 0px 10px 0px;
}
#right h2{
  border-bottom: 1px solid #999999;
}


#right div.item{
  width:220px;
  float:left;
  margin: 5px 17px 5px 0px;
  border-bottom: 1px solid #999999;
}

Servicios recibe el nombre class="lefti", e Inicio recibe el nombre id="right".

Espero me puedan ayudar, gracias de antemano.

Un saludo.