How to display the unordered list under the image?

Question

I've got an image next to a paragraph, with the style float:left and float:right, so they are shown next to each other. I want to display an unordered list, under the image and the paragraph. But instead the first list-element is displayed right at the top of the image. Here is the code

<div id="Teil"style="display: inline-block">
	  <img src="Bilder/Bild4.jpg" width=600em style="float:left; margin:1em">
	  <p style="float:right; margin:1em; font-family:'Corbel';	font-size:1.7em;"> <b>Was ihr braucht:</b><br>
		250	g	weiche Butter<br>
		100	g	Zucker<br>
		100	g	brauner Zucker<br>
		1	TL	Backpulver<br>
		300	g	Mehl<br>
		2	Stk	Eier<br>
		100	g	gemahlene Haselnüsse<br>
		100	g	gehackte Walnüsse<br>
		150	g	Chocolate Chips<br></p>
	<ol style="float:none;">
	<li>Vor Beginn des Backens muss der Ofen auf 200 Grad vorgeheizt werden.</li>

	<li>Anschließend wird eine Schüssel zur Hand genommen (z.B. Plastikschüssel). Darin soll die weiche Butter (kann in der Mikrowelle etwas geschmolzen werden) und die zwei Zucker Arten verrührt werden.</li>

	<li>Die Eier jetzt einzeln auf höchster Stufe des Handrührgeräts unterrühren.</li>

	<li>Jetzt kommen die Haselnüsse und Walnüsse ins Spiel. Diese müssen jetzt zur Masse hinzugefügt und vorsichtig untergemengt werden. Anschließend können auch die Schokotropfen untergerührt werden.</li>

	<li>Ist die Masse gut verrührt, können aus dem Teig kleine Kugeln geformt werden. Die Größe erinnert an einen Tischtennisball. Die geformten Kugeln sollen jetzt mit einer Gabel flach gedrückt und auf das Backblech verteilt werden.</li>

	<li>Jetzt können die Chocolate Chip Cookies auf mittlerer Schiene bei 170 Grad gebacken werden.</li>

	<li>Anschließend auskühlen lassen und verzehren.</li>
	</ol>
	  
	  
	  </div>

And the result: https://i.sstatic.net/DO8kG.png

Answer 1

Try this way @supermaxy4. I added styles and changed your code a bit, hope you got what you want.

HTML

<div class="container vertical-divider">
  <div class="column two-fifths">
  <img src="Bilder/Bild4.jpg" width=600em height=300em style="float:left; margin:1em">
  </div>
  <div class="column three-fifths">
     <p style="float:right; margin:1em; font-family:'Corbel';  font-size:1.4em;"> <b>Was ihr braucht:</b><br>
        250 g   weiche Butter<br>
        100 g   Zucker<br>
        100 g   brauner Zucker<br>
        1   TL  Backpulver<br>
        300 g   Mehl<br>
        2   Stk Eier<br>
        100 g   gemahlene Haselnüsse<br>
        100 g   gehackte Walnüsse<br>
        150 g   Chocolate Chips<br>
     </p>
   </div>
</div>
<div class="container vertical-divider">
  <div class="column" align="left">
    <ol style="float:left;">
    <li>Vor Beginn des Backens muss der Ofen auf 200 Grad vorgeheizt werden.</li>

    <li>Anschließend wird eine Schüssel zur Hand genommen (z.B. Plastikschüssel). Darin soll die weiche Butter (kann in der Mikrowelle etwas geschmolzen werden) und die zwei Zucker Arten verrührt werden.</li>

    <li>Die Eier jetzt einzeln auf höchster Stufe des Handrührgeräts unterrühren.</li>

    <li>Jetzt kommen die Haselnüsse und Walnüsse ins Spiel. Diese müssen jetzt zur Masse hinzugefügt und vorsichtig untergemengt werden. Anschließend können auch die Schokotropfen untergerührt werden.</li>

    <li>Ist die Masse gut verrührt, können aus dem Teig kleine Kugeln geformt werden. Die Größe erinnert an einen Tischtennisball. Die geformten Kugeln sollen jetzt mit einer Gabel flach gedrückt und auf das Backblech verteilt werden.</li>

    <li>Jetzt können die Chocolate Chip Cookies auf mittlerer Schiene bei 170 Grad gebacken werden.</li>

    <li>Anschließend auskühlen lassen und verzehren.</li>
    </ol>
    </div>
 </div>

CSS

.container { position: relative; margin: 2px auto; padding: 0; }
.container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

Answer 2

Add float:left; to the style of 'ol' insted of float:none;

<div id="Teil"style="display: inline-block">
      <img src="Bilder/Bild4.jpg" width=600em style="float:left; margin:1em">
      <p style="float:right; margin:1em; font-family:'Corbel';  font-size:1.7em;"> <b>Was ihr braucht:</b><br>
        250 g   weiche Butter<br>
        100 g   Zucker<br>
        100 g   brauner Zucker<br>
        1   TL  Backpulver<br>
        300 g   Mehl<br>
        2   Stk Eier<br>
        100 g   gemahlene Haselnüsse<br>
        100 g   gehackte Walnüsse<br>
        150 g   Chocolate Chips<br></p>
    <ol style="float:left;">
    <li>Vor Beginn des Backens muss der Ofen auf 200 Grad vorgeheizt werden.</li>

    <li>Anschließend wird eine Schüssel zur Hand genommen (z.B. Plastikschüssel). Darin soll die weiche Butter (kann in der Mikrowelle etwas geschmolzen werden) und die zwei Zucker Arten verrührt werden.</li>

    <li>Die Eier jetzt einzeln auf höchster Stufe des Handrührgeräts unterrühren.</li>

    <li>Jetzt kommen die Haselnüsse und Walnüsse ins Spiel. Diese müssen jetzt zur Masse hinzugefügt und vorsichtig untergemengt werden. Anschließend können auch die Schokotropfen untergerührt werden.</li>

    <li>Ist die Masse gut verrührt, können aus dem Teig kleine Kugeln geformt werden. Die Größe erinnert an einen Tischtennisball. Die geformten Kugeln sollen jetzt mit einer Gabel flach gedrückt und auf das Backblech verteilt werden.</li>

    <li>Jetzt können die Chocolate Chip Cookies auf mittlerer Schiene bei 170 Grad gebacken werden.</li>

    <li>Anschließend auskühlen lassen und verzehren.</li>
    </ol>


</div>

Answer 3

You can add clear:left; to your <ol> tag.

If you want the ol to be below both elements, you can add clear: both; instead.

<div id="Teil"style="display: inline-block">
	  <img src="https://images-gmi-pmc.edge-generalmills.com/eb52c020-c145-440c-8445-911f133c0096.jpg" width=300px; style="float:left; margin:1em">
	  <p style="float:right; margin:1em; font-family:'Corbel';	font-size:1.7em;"> <b>Was ihr braucht:</b><br>
		250	g	weiche Butter<br>
		100	g	Zucker<br>
		100	g	brauner Zucker<br>
		1	TL	Backpulver<br>
		300	g	Mehl<br>
		2	Stk	Eier<br>
		100	g	gemahlene Haselnüsse<br>
		100	g	gehackte Walnüsse<br>
		150	g	Chocolate Chips<br></p>
	<ol style="float:none; clear: left;">
	<li>Vor Beginn des Backens muss der Ofen auf 200 Grad vorgeheizt werden.</li>

	<li>Anschließend wird eine Schüssel zur Hand genommen (z.B. Plastikschüssel). Darin soll die weiche Butter (kann in der Mikrowelle etwas geschmolzen werden) und die zwei Zucker Arten verrührt werden.</li>

	<li>Die Eier jetzt einzeln auf höchster Stufe des Handrührgeräts unterrühren.</li>

	<li>Jetzt kommen die Haselnüsse und Walnüsse ins Spiel. Diese müssen jetzt zur Masse hinzugefügt und vorsichtig untergemengt werden. Anschließend können auch die Schokotropfen untergerührt werden.</li>

	<li>Ist die Masse gut verrührt, können aus dem Teig kleine Kugeln geformt werden. Die Größe erinnert an einen Tischtennisball. Die geformten Kugeln sollen jetzt mit einer Gabel flach gedrückt und auf das Backblech verteilt werden.</li>

	<li>Jetzt können die Chocolate Chip Cookies auf mittlerer Schiene bei 170 Grad gebacken werden.</li>

	<li>Anschließend auskühlen lassen und verzehren.</li>
	</ol>
	  
	  
	  </div>