html - Why image not shown fully, because of float, or image above?

Question

I want that text2 stands next to image3 on the left side in the middle, but unfortunately its not shown fully and goes visually under image2. It has something to do with the float tag in the css code or the image 2 above but i dont know whats the problem, would be nice if someone could help :) This is my html code;

.image2{
      width: 1917px;
      height: 523px;
    }


    .imagetwo{
      width: 1917px;
      height: 523px;
      margin-top: 0px;
      position:absolute;
    }



    .button1{
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      background-color: #212f40;
      color:white;
      font-size: 30px;
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
      width: 400px;
      height: 90px;
    }

    .button1:hover {
      background-color:#911e46;
    }


    .image3{
      float:right; 
      margin-left: 5em;
      width: 905x;
      height: 590px;
    }

    .imagethree .text2{
      font-family: 'Montserrat', sans-serif;
      margin-left:40px;
      margin-top: 50px;
      padding: 10px;
      color: white !important;
      text-align:center;
    }

.<div class="imagetwo">
  <img class="image2" src="https://pixabay.com/de/photos/erbse-erbsen-gem%C3%BCse-gr%C3%BCn-1205673/">
  <button class="button1">Jetzt informieren </button>
</div>

<div class="imagethree">
  <img class="image3" src="https://pixabay.com/de/photos/aufsicht-closeup-vegetarismus-1248949/">
  <div class="text2">
    <h1>Lass dich beraten</h1>
    <p>Wir geben unser bestes für jeden Einzelnen.</p><br>
    <p>Ich begleite dich auf dem Weg zu mehr Wohlbefinden...
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat <br>
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    <br>
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    </p>
   </div>
</div>

Answer 1

If you use float, give the image a width. Otherwise it will show at its full size (if the image is 4000px wide, it will be displayed with a width of 4000px and proberly overflow every screen. This is how float actually works:

.image3{
  float: right; 
  margin-left: 5em;
  width: 50%;
}


.text2{
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

<img class="image3" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">


<div class="text2">
  <h1>LOREM IPSUM</h1>
  <p class="one1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br>
  <p class="two1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <br>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>