A ver, estoy modificando un CSS de una template de Joomla! yo he querido darle más espacio al menú lateral (sidebar) y al hacerlo, el contenido se desplaza debajo del menú.
Si no agrando el menú, el nombre de los items no caben en una linea (imagen 1)
![](http://www.webgestiona.com/img/pag1.png)
Y si agrando el menú para que los items queden bien, se desmonta el contenido (imagen 2)
![](http://www.webgestiona.com/img/pag2.png)
¿Cómo puedo arreglarlo?
Además no consigo que los subitems (que en la imagen se ven más a la izquierda), tengan una imagen de fondo diferente a los items principales...
Os pongo parte del código CSS:
Código:
Y aquí está completo el CSS. por si alguien peude ayudarme!!! /* begin LayoutCell */ .art-contentLayout .art-sidebar1 { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 252px; } /* end LayoutCell */ /* begin LayoutCell */ .art-contentLayout .art-content { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 556px; } .art-contentLayout .art-content-sidebar1 { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 764px; } .art-contentLayout .art-content-sidebar2 { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 784px; } .art-contentLayout .art-content-wide { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 992px; } /* end LayoutCell */ /* begin LayoutCell */ .art-contentLayout .art-sidebar2 { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 252px; } /* end LayoutCell */