I have a problem with closing a <div>-tag after a "Read more" button.

Within the article editor, Joomla uses a <hr id="system-readmore" /> statement for creating the read more button in an intro-text.

The problem is, that i need to add a <div> tag which surrounds this "readmore"-tag.


<div style="overflow: hidden;">
    <h3><img class="img_staff" src="images/staff1.jpg" alt="" width="120" height="150" />Test Person</h3>
    <p><strong>Tel:</strong> 0000 0000 0000</p>
    <p><strong>Email:</strong> [email protected]</p>
    <hr id="system-readmore" />
<div style="clear: left;">

This example should display an image on the left side and text on the right (image float:left). The "overflow: hidden;" i use to avoid an image, that is bigger than the surronding <div>-Tag (an thus falls out of the <div>-tag).

The problem is, that this first div-tag doesn't get closed in the intro article (as the "readmore" button cuts the code). Is there a solution for this problem in Joomla, or do you know any CSS-solution, to get this desired looking?

  • Can you post some of your relevant CSS code, and maybe a screenshot of how it should look? Why do you need the </div> tag AFTER the readmore tag?
    – johanpw
    Commented Jan 19, 2015 at 15:44
  • What is it you are trying to do exactly? If you want to style the <hr> why don't you simply attach css styles to that?? Commented Jan 19, 2015 at 16:28

2 Answers 2


There is no pure CSS-solution to it, that's for sure.

In general, there is more than one solution actually:

  • the lightest way, especially if not every article is concerned, would be to write down your intro, close the div, put the read-more button and copy your introduction again after the read more-button, configuring the article to not show the introduction text when displaying the whole article.
  • you also could, if every article of your site or of a specific menue-item is concerned, override the com_content templates and hard-code the closing tag in it. It's not very beautiful, though
  • you could create your own plugin, in order to be able to write something like {myReadMore} in your article instead of using the built-in readmore.

In your case, I don't really understand why it's so important to have the read-more within the first div. Maybe you should see if putting it after the closing tag isn't exactly what you look like.


pagebreak plugin manages this logic, for instance removing hr id="system-readmore" when Presentation Style=Pages.

You can create your own pagebreak plugin to create your custom logic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.