Problemas con div detro de otros div

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.

Como 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. 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*/
   width:100%;
   border: 2px solid black; /*borde*/
   overflow: auto; /*scroller subgrupos elementos*/
}

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

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

Hola

Y dime podrias colocar un link donde se vea ese formulario ya corriendo en un html en linea? creo que asi quizas te pueda ayudar mejor.

Si, pero dejenme subirla porque estaba trabajando local en mi computador, apenas la suba les aviso. Gracias

este es el link de la pagina

[url=http://adimporexport-com.co.cc/index.php?option=com_fabrik&view=form&fabrik=3&random=0&Itemid=113]

espero que me puedan ayudar, tomándome la oportunidad si saben como puedo solucionar un problema con el menú o mejor dicho con el swf de las fotos que queda encima de el menú, gracias por toda la ayuda que me puedan brindar.

Bueno para empezar cada uno de esos divs angostos tienen un atributo width:1.7619047619% en el style, debes kitarle eso a cada uno y veras que ya no salen pegados, haz eso primero y me dices como te va.

Perdona, eso he tratado pero no quieren hacer caso al codigo por decirlo de esa forma, le he colocado por ejemplo a 100% o 100px o mas y no lo hace, no se si sea porque ellos son creados dentro de un foreach, no hay otra forma, porque eso lo hago desde el css y no lo hacen los elementos del estado de mercancia, pero si los de datos del cliente.

Perdon no es datos del cliente, sino datos del lote. No se si tambien sea porque estan esos div dentro de otro div al cual no le coloco un ancho especifico sino que lo coloco al 100%, pero cuando le coloco por ejemplo 10000px, los div que son los que continen los elementos se ponen mas anchos, pero no lo suficiente y ademas me dejan un gran espacio al final del div padre. Para que lo vean lo voy a modificar. Gracias de antemano por la ayuda que me puedan brindar.

Pero esto ultimo si coloco un valor grande, pero si colocara un valor mas pequeño, los div hijos, es decir los que contienen los elementos, modifican su ancho y se adaptan al div que los contiene, pero no al ancho de los elementos que estos tienen, y es esto ultimo lo que yo deseo, que ellos solo abarque el ancho de las cajas de texto, etc, que ellos contienen. Gracias

Posdata: el código de arriba es el del ejemplo solo cambie el valor del width a 10000px del fabrikSubGroupElements2 que es el div que contiene los demás.

Bueno por lo que veo el ancho de los divs pequeños son autogenerados dependiendo del div grande que los contiene, no se si se podria quitar el width de ese div grande, porque por defecto un div ya tiene un 100% de ancho, prueba quitandole el width.

Amigo, ya lo hice, y nada, esta igual.

que pena

No sabria decirte, como es un componente solito hace sus calculos, yo en lo personal prefiero hacer mis propios formularios, y como te dije modificando el codigo que ya imprime tu html, le quito esos widths que pone el componente y ya se acomoda, siento no poder ayudarte.

Perdona, esos formularios los haces en joomla?, si es asi me puedes ayudar a hacer, osea, un ejemplo o tutorial que tenga y me puedas dar. A parte si es el componente, que asi como te entendi, en que donde creerias que puede que haces esos calculos, para mirar si puedo hacer algo. Gracias por todo de todas formas.

No, me referia a que yo escribo mi propio codigo xhtml y css, no he usado joomla. Quiza alguien mas de la comunidad que haya usado Fabrik con Joomla te pueda ayudar

Ok, gracias de todas formas por la ayuda que me intentaste dar.