1

In a Joomla (3.6.5) article I have an image with style: float:left, with several h3 headings, each followed by some plain paragraph text.

Depending on the viewing screen width, which varies a lot, sometimes one of the h3 headings lines up at the bottom of, but still to the right of, the image and the following paragraph is underneath the image on the left. (see mockups)

What I am trying to achieve is to keep the h3 heading with the following first paragraph in the same way as MS Word's "keep with next" function.

I have no special CSS for this article and am not using ul or ol lists. There is only one column and one page, so page-break-avoid is not relevant. It is not a page-break issue.

I have tried wrapping the h3 and associated p tags in a container, but that makes no difference.

Image 1: current text wrapping Image 1: current text wrapping

Image 2: the 'keep with next' text wrap I am wanting to achieve: Image 2: the 'keep with next' text wrap I am wanting to achieve

For what it's worth, the code is just:

<h3 style="margin-top: 0; line-height: 30px;">
  <img src="images/image-file.jpg" alt="alt text" style="margin-right: 15px; margin-bottom: 5px; float: left;" />h3 heading
</h3>
<p>Some text<br />Some more text</p>
<h3>Another h3 heading</h3>
<p>The quick brown fox jumps over the lazy dog</p>
</h3>
<h3>Third h3 heading</h3>
<p>Last bit of text. Would like to keep previous h3 heading with this first line when wrapping around images</p>

Any suggestions gratefully received.

Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58
Gillian
  • 287
  • 2
  • 11
  • Possible duplicate of [CSS and Printing : Keep block of text together](http://stackoverflow.com/questions/2051788/css-and-printing-keep-block-of-text-together) – scoopzilla Jan 26 '17 at 16:41
  • I don't think it's a duplicate as it's not a page-break issue. – Gillian Jan 26 '17 at 18:04

2 Answers2

0

You are heading in the right direction by wrapping the <h3> and the associated <p> tags in a container, but rather than floating the images left, float these containers right.

Neil Robertson
  • 3,295
  • 3
  • 28
  • 49
  • Thanks, Neil. I couldn't get this to work. Wrapping individual groups of h3 and p tagged text into containers with float: right (and removing the image's float: left) just threw those divs off to the left - outside the component area and over the adjacent sidebar, in fact. Wrapping the whole lot - except the image - in a container moved everything under the image. Maybe I'm missing something? – Gillian Feb 02 '17 at 16:43
0

It can be solved with a media query. It's not a general solution, but you can do it with an inline css something like this.

<style>
@media (max-width: "500px"){ //Change it accordingly, whenever that break between h3 and p occurs
h3.yourclass{clear: left;} //Assign a class to that h3 or select it with nth-child selector 
}
</style>
Ed Dogan
  • 255
  • 2
  • 8
  • Thanks, I got there eventually, after trying about 100 different max-widths. I did, however, remove the double quotes from around the pixels as my Joomla css does not use them in this instance. As you say, it's not a general solution, as it will depend each time on the width of the image used, but it achieves what I was looking for. (I have given you a positive vote but as my reputation is low it doesn't show). – Gillian Feb 02 '17 at 16:38
  • @Gillian You are able to award this answer with the green tick if it was the most helpful in resolving your issue. – mickmackusa Nov 08 '18 at 13:02