Styling Suggestions?

Hi Guys,

I’m working on a site that uses the Joomla CMS and one of my pages displays a number of images with the article title and a link for more info.

It looks neat an tidy until the title breaks over two lines and then it pushes everything out of sync.

For some reason Joomla aligns the articles in 3 columns rather than 3 rows which means the whole page is messed up, not just one row.

Any idea about what I can do to to prevent this using CSS?

Here’s the page:


you need to give yourself some space mate. I don’t know the brief of this site but you need to open the site up a bit wider, use the space available to us at least 960 framework.

You full available width at the moment is 780px wide was there a reason for this? Opening the site wider will give you space to edit these elements.

At the moment your only options are to make the titles smaller to make them fit, and doing so will result in them being too small.


You could set the height of the tables to even out the elements.

#mainbody tbody tr td table tbody tr td.article_column p{margin:0}


Or something like that.

Thanks for the suggestions. In the end i decided to utilise a Joomla Extension called Mini Front Page. This achieved the same result, but structured the info differently allowing more control with CSS, but crucially it position the text beneath the images and organised the content in rows rather than columns.