Tribute Page, Help

Tribute Page, Help
0

#1

Hello, I would like some help please.
How to I start a new line below the image about “Tesla’s Inventions”. I don’t want it to be next to the image like the biography. Thank you.

HTML:

<div>
  <h1 class="text-center">Nikola Tesla</h1>
  <h5 class="text-center">Inventor, Electrical Engineer, Mechanical Engineer, Physicist, and Futurist</h5>
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/N.Tesla.JPG/220px-N.Tesla.JPG">
    <p>
      Born and raised in the Austrian Empire, Tesla received an advanced education in engineering and physics in the 1870s and gained practical experience in the early 1880s working in telephony and at Continental Edison in the new electric power industry. He emigrated to the United States in 1884, where he would become a naturalized citizen. He worked for a short time at the Edison Machine Works in New York City before he struck out on his own. With the help of partners to finance and market his ideas, Tesla set up laboratories and companies in New York to develop a range of electrical and mechanical devices. His alternating current (AC) induction motor and related polyphase AC patents, licensed by Westinghouse Electric in 1888, earned him a considerable amount of money and became the cornerstone of the polyphase system which that company would eventually market.</p>
    <p>
      Attempting to develop inventions he could patent and market, Tesla conducted a range of experiments with mechanical oscillators/generators, electrical discharge tubes, and early X-ray imaging. He also built a wireless-controlled boat, one of the first ever exhibited. Tesla became well known as an inventor and would demonstrate his achievements to celebrities and wealthy patrons at his lab, and was noted for his showmanship at public lectures.</p>
  </div>
  <h3>Tesla's Inventions</h3>
</div>

CSS:

body {
  font-family: Verdana;
}

.text-center {
  text-align: center;
}

h5 {
  font-style: italic;
}

h1 {
  font-size: 60px;
  line-height: 10px;
}

img {
  width: 300px;
  border-style: groove;
  border-width: 10px;
  float:left;
  margin-left: 60px;
  margin-right: 10px;
}

p {
  padding-right: 60px;
  padding-top:5px;
}
h3 {
  float:left;
}


#2

You have a problem with your floats I think. I would suggest googling clear and floats :slight_smile: One page i found quickly: https://css-tricks.com/all-about-floats/


#3

Thank you so much! Now it looks a lot cleaner aswell.