Hello All,

I am using joomla 1.5.

I have various articles in a category and then I am using a Category Blog Layout to show the INTRO text of these articles.

The articles contain images for which I have defined a FLOAT: RIGHT property by using this line....
<img height="175" width="300" src="images/stories/iosh.jpg" style="margin: 5px; border: 1px solid #cccccc; float: right;" />


Here is how the articles start:
-----------------------------------------
<p />According to the Institution of Occupational Safety and Health, workplace accidents and compensation payments cost businesses £7.8 billion a year.
<hr id="system-readmore" />
This is a cost where there is room for savings the government is suggesting. Further to the ideas for red tape reduction the government is hoping to make it more difficult for employees to be eligible for pay outs over health and safety at work issues.</p>
-------------------------------------------

Please see the attached image to know how the images are aligned... I want all images to be on the extreme right...

The images float to the left if the text before "readmore" is of one line... if I use the "readmore" after two or three lines then the images get right aligned appropriately..

Here is the link to the website:
hrcompanion.co.uk/latest-news/blog

Please help.

Kind regards,
Ahtasham

Ahtashman,

You need to have closed pairs of HTML tags, as when displayed in the blog view, the end of the tag will be stripped off.

So from your example:

<p />According to the Institution of Occupational Safety and Health, workplace accidents and compensation payments cost businesses £7.8 billion a year.
<hr id="system-readmore" />
This is a cost where there is room for savings the government is suggesting. Further to the ideas for red tape reduction the government is hoping to make it more difficult for employees to be eligible for pay outs over health and safety at work issues.</p>

should be

<p />According to the Institution of Occupational Safety and Health, workplace accidents and compensation payments cost businesses £7.8 billion a year.</p>
<hr id="system-readmore" /><p>
This is a cost where there is room for savings the government is suggesting. Further to the ideas for red tape reduction the government is hoping to make it more difficult for employees to be eligible for pay outs over health and safety at work issues.</p>

As the image is floated, it needs to float around the paragraph text.

Sometimes where there's only the one line - so you've not put any line breaks in - the content will save without any paragraph formatting and may cause the image not to correctly wrap.

See how that goes.

Dear Partic,

Thank you for your help. Have tried your suggested thing as well but it didn't work.

I have handled it for now by placing the "READMORE" after at least two lines of text. This lets the text take up full width of the page..

Kind regards,
Ahtasham

A closer look (as your blog articles are all now correct) using firebug highlighted some issues... it's actually floating the image to the right in your screen shot - it's just collapsing the width of the layout as there's no width set for some of the main divs on that page.

Check the css for these two styles:

.article_column {
width: 100%;
}

.article_column is set in the template, but not defined as a style in the css. Add the above to your template.css and you'll find that the article lays out again full width.


.blog = non existent in css at the moment - styles the width of the entire content area of the layout page (have had this happen before) - set it to either width:100% or width: pixel width of full page. I've found in the past that without definining this value, multiple column layouts collapse, as well as some full column layouts.



.

Dear Partic!

Don't have words to express my gratitude towards you!!!

this .article_column thing did the job!!!

Much obliged!!!!

Kind regards,
Ahtasham