How to "push" next heading below floating image

Support Themes & Styling
1

Hi,

Sorry if this is a very basic question or if I’m writing in the wrong place. I’m new to Grav and twig (and fairly new to Markdown). I’m loving it, but still trying to figure out my way around it.

I’m using Quark theme and I have a page with default template that is something like this:

# Title
## 1st Heading
![](image1.png&classes=float-right)
Some paragraphs...
---
## 2nd Heading
![](image2.png&classes=float-right)
Some more paragraphs...
---
## 3rd Heading
... (and so on) ...

My problem is that if the text height under each heading is shorter than the image height, then the image will “float over” to the next heading…

What can I do (either with Markdown, Twig, CSS, HTML, …) to add a “section break” and force it to automatically add some extra vertical space between the paragraph and the HR, when the text height is shorter than the image, so that the HR (and the next heading) is pushed down just below the floating image?

I’ve search Grav manual and the forum but couldn’t find any solution.

Thanks.

2

CSS Clearfix is normally used for such instances.
.clearfix::after{content: "";clear: both;display: table;}
Markdown is a rather flexible language. Try adding a few HTML line breaks <br> under the shorter paragraphs. Or just enough html <p>&nbsp;</p> to clear the image height. Bare in mind, I’m still rather new to Grav as well.

3

Thank you for your reply!

That’s my temporary fix but it’s not the ideal solution… On a narrower browser window (such as in a mobile device) you’ll end up with unnecessary vertical space.

I’ll have a look at clearfix.