HTML / CSS float left doesn't work on my code-CodePudding

I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.

The structure should look like this:

Text - Image
Image - Text
Text - Image.

I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.

Can you help me? Thank you very much.

<div >
  <div>
    <p >
      fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
    </p>
  </div>
  <div>
    <img src=speise.jpg alt="Speise" style="float: right">
  </div>
</div>
<h3>Wine</h3>
<div >
  <p >
    fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
  </p>
</div>
<div>
  <img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div >
  <div>
    <p > vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
  </div>
  <div>
    <img src="dj.jpg" alt="DJ legt auf" style="float: right">
  </div>
</div>

CodePudding user response：

You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.

So just combine the divs. You may even want your images inside the paragraphs.

Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.

<div >
  <div>
    <p >
      fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
    </p>

    <img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
  </div>
</div>

<h3>Wine</h3>

<div >
  <p >
    fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
  </p>

  <img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>

<h3>Music</h3>

<div >
  <div>
    <p > vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>

    <img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
  </div>
</div>

CodePudding user response：

This is happening because you are styling the image while your image resides inside a new div.

Try this code instead

<div >
  <div>
    <p >
      fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
    </p>
  </div>
  <div style="float: right">
    <img src=speise.jpg alt="Speise">
  </div>
</div>
<h3>Wine</h3>
<div >
  <p >
    fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
  </p>
</div>
<div style="float: left">
  <img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div >
  <div>
    <p > vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
  </div>
  <div style="float: right">
    <img src="dj.jpg" alt="DJ legt auf">
  </div>
</div>

do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!