0

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>
Chiller
  • 9,520
  • 2
  • 28
  • 38
Lego
  • 117
  • 10
  • Do not use `float`, use a `table` instead.... – Usagi Miyamoto Aug 07 '17 at 13:07
  • Remove margin and use padding instead or display inline-block instead float. – Germano Plebani Aug 07 '17 at 13:09
  • I tried using margin, don't know exactly which margins I have to replace margin, but I did it for all. It didn't really work for me – Lego Aug 07 '17 at 13:13
  • Quite simply, your div elements are wider than the total width of the container. You aren't considering width + margin in your calculations. – Rob Aug 07 '17 at 13:28
  • Possible duplicate of [CSS: Why don't these two div (or span) elements float next to each other](https://stackoverflow.com/questions/25504670/css-why-dont-these-two-div-or-span-elements-float-next-to-each-other) – Rob Aug 07 '17 at 13:31

2 Answers2

1

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>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
0

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>
Usagi Miyamoto
  • 6,196
  • 1
  • 19
  • 33