Problemas con div dentros de otros div

[gilberth]

Buenos dias, llego a ustedes por no encontrar solucion en google, ya estoy cansado de buscar y no encontrar lo que necesito. Mi problema es el siguiente, yo estoy manejando joomla y en agregue un componente llamado fabrik, este componente me ahorra mucho tiempo en el diseño de formularios, en el se pueden colocar columnas y este es el problema, esta columnas son para separar los elementos como cajas de texto, check box, combos, etc, pero me los coloca muy pegados entre ellos y los div que son los que contienen estos elementos no tienen el ancho que deberian, en otras palabras les dejo una imagen para que hagan mejor la idea.



Espero que puedan ver la imagen, si pueden, como se pueden ver en la imagen en Estado de Mercancia, he colocado un borde los div para que se pueda ver hasta donde llega cada uno, he tratado de modificar el codigo css, y no he logrado mi cometido. Si no puedieron ver la imagen este es el link de la pagina en la que trabajo,

http://adimporexport-com.co.cc/index.php?option=com_fabrik&view=form&fabrik=3&ran dom=0&Itemid=113

Esta es parte del codigo que utiliza el componente.

Código:

               <div class="fabrikSubGroupElements">
                  <div class="fabrikSubGroupElements2">
                     <?php 
                     $this->elements = $subgroup;
                     echo $this->loadTemplate('group'); 
                     ?>
                  </div>
               </div>

este otro es el que llama el codigo anterior, es el que realmente coloca los elementos:

Código:

<?php foreach ( $this->elements as $element ) {
   ?>
   <div <?php echo $element->column;?> class="fabrikElementContainer <?php echo @$element->hidden ? 'fabrikHide' : '' ?>">
      <div id="<?php echo @$element->id . "_error";?>" class="fabrikError <?php echo ($element->error != '') ? '' : 'fabrikHide'; ?>">
         <?php echo $element->error;?>
      </div>
      <?php echo $element->label;?>
      <div class="fabrikElement">
         <?php echo $element->element;?>
      </div>
      <div style="clear:both"></div>
   </div>
   <?php }?>

Y este es el css que utiliza:

Código:

.fabrikGroupRepeater{
   float:left;
   width:3%;
   border: 2px solid black; /*borde*/
}

.fabrikSubGroup{
   clear:both;
}

.fabrikSubGroupElements{
   width:570px;
   float:left;
   border: 2px solid black; /*borde*/
   margin: 0;
   overflow: auto; /*scroller subgrupos elementos*/
   clear:both;
}

.fabrikSubGroupElements2{/*nuevo*/
   border: 2px solid black; /*borde*/
   overflow: auto; /*scroller subgrupos elementos*/
}

.fabrikElementContainer{ /*nuevo*/
   border: 2px solid black; /*borde*/
}

He buscado ayuda en otra pagina, pero hasta el momento no me han podido ayudar con lo que necesito, este es el link de la pagina,

http://www.cristalab.com/foros/t65104_problemas-con-div-detro-de-otros-div.html#435351

Espero que me puedan ayudar, y que lo que dije quede lo suficientemente claro para que me puedan ayudar. Gracias