my divs are nested in other divs but i dont want that, because im pretty sure thats what makes my boxes misaligned. anyone have a fix for this?

Question

Im new here and i am doing this for a school assignment, it was due today but i can still edit it until he marks it which could be soon, but my boxes arent aligned properly and i think its something to do with the box3 div being nested in the box2 div but im not sure. anyone got any fixes?

<head>
    <title>Nikola Tesla Biography</title>
    <meta charset="utf-8">
     <style>
    #box1 {
        background: rgb(255, 255, 255);
        width: 900px;
        height: 1770px;
        border: 10px solid rgb(220, 220, 220)
      }
    </style>  
    <style>
      #box2 {
        background: rgb(245, 245, 245);
        width: 700px;
        height: 260px;
        border: 10px solid rgb(220, 220, 220)
      }
    </style>
    <style>
      #box3 {
        background: rgb(245, 245, 245);
        width: 700px;
        height: 400px;
        border: 10px solid rgb(220, 220, 220)
      }
    </style>
</head>
<center><div id="box1">
  <p>ㅤ</p>
  <h1><b><center>Nikola Tesla</center></b></h1>
  <center><img style = "border: 10px solid rgb(220, 220, 220);"     src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/220px-Tesla_circa_1890.jpeg"width="200"></center>
<body style="background-color: rgb(235, 235, 235);">
  <p><center><b style ="font-size: 150%;"">A Biography Written By Sutton Helps.  </b></center></p>
  <p>ㅤ</p>
<center><div id="box2"><h3 style = "padding: 1.5%;">General Information</h3>
  <p>Born on July 10th 1856 in Smiljan Croatia (At the time Austro-Hungary   Empire).</p>
  <p>Died on January 7th 1943 in New York, United States of America.</p>
  <p>Dropped out of university at the age of 22.</p>
  <p>Was employed by Thomas Edison but later quit.</p>
  <p>He moved to America in 1884 with four cents to his name.</p>
  <p>ㅤ</p>
<div id="box3"><h3 style = "padding: 1.5%;">List of A Few Things He Invented</h3>
  <p>Tesla Coil</p>
  <p>Tesla Valve</p>
  <p>Radio</p>
  <p>Remote Control</p>
  <p>Wireless Communication</p>
  <p>Violet Ray</p>
  <p>Death Ray</p>
  <p>Shadowgraph (Basically X-Rays)</p>
  <p>Induction Coil</p>
  <p>ㅤ</p>
<p><b style ="font-size: 150%;">A Life Summary Of Nikola Tesla.</b></p>
<p>Born on July 10th 1856 in Smiljan Croatia, which at the time was a part of the Austro-Hungary Empire, Nikola Tesla was an inventor who made many things. The most useful/important ones as of today are wireless communication, the radio, remote control, and shadowgraph which was basically and x-ray. At the age of just 22, Tesla dropped out of university and moved to the United States of America with just four cents, a few of his own poems, and some great ideas. There, Tesla worked with people such as Thomas Edison and George Westinghouse. While working with Edison, he was told told he would receive $50,000 if he could improve the design for DC dynamos, but after doing so, Edison told Tesla that he was joking, and that he didn't understand American humor. After failing to start his own electric light company, Tesla found some supporters for his inventions, and after receiving more than 30 patents for his inventions, he caught the eyes of George Westinghouse, and started to work for him. However, Tesla prefered independent work and stopped working for both of them to pursue his own career in inventing, but due to lack of funds he was only able to invent so much. One of his biggest achievements was making the electric power station at Niagara Falls which made power for the city of Buffalo New York. Tesla later ended up dying on January 7th 1943 in New York.</p>
<p>ㅤ</p>
<center><b style ="font-size: 150%;">Sources:</b>
  <p></p>
    <a href="https://www.britannica.com/summary/Nikola-Tesla"> Britannica </a>
  <p></p>
    <a href="https://www.history.com/topics/inventions/nikola-tesla"> History </a>
  <p></p>
    <a href="https://theculturetrip.com/europe/serbia/articles/11-amazing-things-nikola-tesla-gave-the-world/"> Theculturetrip </a>
    </p></center>

Answer 1

the problem is absolutely not because of nesting div elements, i couldn't realize what you meant by misaligned but here are your code's problems

box3 has more height than his father (which makes it overflow the father)

<center> element is deprecated try using CSS margin:auto instead for div((block level)) elements And for texts like those inside h1 you can use CSS text-align:center

Problem could also be the result of your padding: 1.5% , try removing them and see if it fixes your problem

my divs are nested in other divs but i dont want that, because im pretty sure thats what makes my boxes misaligned. anyone have a fix for this?

Question

1 answers

solution1
0 2022-12-20 05:06:34

my divs are nested in other divs but i dont want that, because im pretty sure thats what makes my boxes misaligned. anyone have a fix for this?

Question

1 answers

solution1 0 2022-12-20 05:06:34

solution1
0 2022-12-20 05:06:34