Images with text on the right under each other

Hi,
I have a problem with aligning text and pictures. I have been looking around on the internet but I cannot find a solution for what I want.
In attachment capture1 you can see that I have an image with some text on the right. Below that I have another image with some text on the right, and below that another image and some text on the right. And this is only a small part of the page. I forced it to look like this for the screencapture with lots of blank lines. But I know this is not the right solution, because when resizing or on other devices things like what's shown in attachment capture2 happen. What is the best solution for this?

Hi

If You want to have it like on the image below than You will need to put the additional code into content. Try add this code:

Code: Select all

<div class="clear"></div>


under the end of the paragraph which comes after the image.

Hi,
My page now looks like the screencapture in the new attachment.
This is (part of) my code:

Code: Select all

<p><img style="margin: 4px; float: left;" src="images/Knopen/Vriendschap/Basis/BasicRightKnotStep1.jpg" alt="Rechtse knoop stap 1" />Houdt de rechterdraad (hier oranje) met de linkerhand strak en knoop de linkerdraad (de knoopdraad, hier blauw) er met de rechterhand omheen door deze van links naar rechts over de rechterdraad (oranje) te leggen. Kleine kanttekening bij deze foto. Het lijkt nu net alsof de blauwe draad rechts van de oranje draad ligt (zie bovenin direkt onder de knoop met alle draden). Als je net begint hebben de draden echter nog niet hun plekje gevonden. Dus als dat je helpt geef je even een klein rukje aan de blauwe draad zodat deze echt links komt te liggen, maar in dit stadium is het dus niet echt van belang. Als de knoop klaar is, wordt de positie van de draden 'gesetteld'.</p>
<div class="clear"></div>
<p><img style="margin: 4px; float: left;" src="images/Knopen/Vriendschap/Basis/BasicRightKnotStep2.jpg" alt="Rechtse knoop stap 2" />Breng de rechterdraad (blauw) weer naar links onder de linkerdraad (oranje) door en breng hem vervolgens weer naar rechts over de oranje draad heen.</p>
<div class="clear"></div>
<p><img style="margin: 4px; float: left;" src="images/Knopen/Vriendschap/Basis/BasicRightKnotStep3.jpg" alt="Rechtse knoop stap 3" />Trek de knop aan. Op de foto links is deze nog niet helemaal aangetrokken om even te laten zien wat de bedoeling is en hoe het er dan ongeveer uitziet. Het eerste deel van de dubbele rechtse knoop is nu gemaakt.</p>
<div class="clear"></div>
<p><img style="margin: 4px; float: left;" src="images/Knopen/Vriendschap/Basis/BasicRightKnotStep4.jpg" alt="Rechtse knoop stap 4" />Herhaal dit nog eens om een dubbele rechtse knoop te maken.</p>
<p>Houdt nog steeds de rechterdraad (oranje) met de linkerhand strak en knoop de linkerdraad ( blauw) er met de rechterhand omheen door deze wederom van links naar rechts over de rechterdraad (oranje) te leggen.</p>
<div class="clear"></div>

I added the <div class="clear"></div> at several points, and removed all the additional empty paragraphs.
Hope you can see what I'm doing wrong.
Thx for helping!

If you want to watch it alive: http://www.dehandwerkjuf.nl/index.php/d ... htse-knoop. I will leave it this way for a while.

Hi

There is no style for class "clear", please just add it to css:

Code: Select all

.clear { clear: both; }


Hi,
I added the code to override.css. I have another override there (for the menu on the frontpage), so I know for sure the overrides are picked up. No difference, still the same problem... Is it another css I should put it in?
Anneke

Hi

Override.css file is not enabled. Please check the screenshot. There is no such name in source code of this page. Please enable it in template settings.

You started me thinking: and than I noticed only the Creativity -Frontpage was enabled for override.... I enabled it for Creativity - Subpages, and it works! Thanks very much for your help. I felt so bad about this display and now it is neat in all circumstances! Thanks again!
Anneke

Hi

No problem. I understand it can be confusing, anyway I'm glad You've made it