3 divs floating next to each other not working properly

Question

I got this code and I am trying to get my 3 divs floating next to each other, but they aren't. They are instead below each other, though I have them put float:left. It looks not right.

Anyone can see where the problem is ?

https://plnkr.co/edit/Gec74f7zLVqSrB6d4hNU?p=preview

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
}

.left {
  width: 30%;
  margin: 05% 00% 00% 05%;
  float: left;
}

.imageleft {
  float: left;
}

.paragraphs {
  margin: 5% 30% 2% 20%;
  width: 40%;
  float: left;
}

.right {
  width: 30%;
  float: left;
  margin: 0% 00% 00% 00%;
}

.imageright {
  width: 300px;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">

    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

Answer 1

Remove margins, and floats, and use display: table* instead:

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: table;
}

.left {
  width: 30%;
  display: table-cell;
}

.imageleft {}

.paragraphs {
  width: 40%;
  display: table-cell;
}

.right {
  width: 30%;
  display: table-cell;
}

.imageright {
  vertical-align: top;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">

    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

Answer 2

Remove your margins here because you want blocks to be on the same line.

To move blocks on single line you can use flexbox here. Add display: flex for container. Flex items (direct children of container ignore floats so you can remove them). Demo:

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: flex;
}

.left {
  width: 30%;
}

.paragraphs {
  width: 40%;
}

.right {
  width: 30%;
}

.imageright {
  width: 300px;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">
    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

Another way is to use display: table for container and display: table-cell for its children (you don't need floats here also):

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: table;
}

.container > * {
  display: table-cell;
  vertical-align: top;
}

.left {
  width: 30%;
}

.paragraphs {
  width: 40%;
}

.right {
  width: 30%;
}

.imageright {
  width: 300px;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">
    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>