Problem fitting two divs side by side in HTML

Question

I am trying to make two divs stand side by side on the webpage using the float property, as described here. However, it isn't working as expected. What do I need to do to fix the issue?

(Please note that I am following a tutorial and thus do not want to use Flexbox or grid for this purpose.)

What I want is something like this:

what I'm getting is something like this:

Here is the HTML for my webpage:

body {
  background-color: #fff;
}

h1 {
  color: lightsalmon;
  text-align: center;
}

.float-container {
  border: 3px solid #fff;
  padding: 20px;
}

.float-container img {
  height: 100%;
  width: 100%;
}

.float-container p {
  color: brown;
  font-size: large;
  text-align: center;
}

.float-child {
  width: 49%;
  float: left;
  padding: 20px;
  border: 5px solid salmon;
}

<h1>Lasagna</h1>
<div class="float-container">
  <img src="images/lasagna.jpg" alt="Lasagna">
  <p>This classic lasagna recipe features a meaty sauce layered with noodles and cheese. It’s perfect for feeding a crowd or freezing for later.</p>
  <div class="float-child">
    <div class="first">
      <h3>Ingredients</h3>
      <ul>
        <li>1 pound lean ground beef</li>
        <li>1 egg (beaten)</li>
        <li>15 ounces part-skim ricotta cheese</li>
        <li>¼ cup fresh parsley (chopped)</li>
        <li>2 ½ cups shredded low-moisture part-skim mozzarella cheese (divided)</li>
        <li>½ cup grated Parmesan cheese (divided)</li>
        <li>24 ounces CLASSICO Tomato And Basil Pasta Sauce</li>
        <li>1 cup water</li>
        <li>12 lasagna noodles (uncooked)</li>
      </ul>

    </div>
  </div>
  <div class="float-child">
    <div class="second">
      <h3>Steps</h3>
      <ol>
        <li>Heat oven to 350°F.</li>
        <li>Brown meat in large skillet on medium-high heat. Meanwhile, combine egg, ricotta, parsley, 1-1/4 cups mozzarella and 1/4 cup Parmesan.</li>
        <li>Drain meat; return to skillet. Stir in pasta sauce. Add 1 cup water to empty sauce jar; cover with lid and shake well. Add to meat mixture; stir until blended.</li>
        <li>Spread 1 cup meat sauce onto bottom of 13x9-inch baking dish sprayed with cooking spray; top with layers of 3 lasagna noodles, 1/3 of the ricotta mixture and 1 cup of the remaining meat sauce. Repeat layers twice. Top with remaining noodles, meat
          sauce and cheeses. Cover with foil sprayed with cooking spray.</li>
        <li>Bake 1 hour or until heated through, removing foil after 45 min. Let stand 15 min. before cutting to serve.</li>
      </ol>
    </div>
  </div>
</div>

Answer 1

You need to have the size include padding since the total width exceeds 100% of the parent's width which makes the second float wrap.

box-sizing: border-box;

If you change the HTML or CSS later, make sure the parent element .float-container has enough width and is not influenced by other CSS properties or parent elements.

body {
  background-color: #fff;
}

h1 {
  color: lightsalmon;
  text-align: center;
}

.float-container {
  border: 3px solid #fff;
  padding: 20px;
}

.float-container img {
  height: 100%;
  width: 100%;
}

.float-container p {
  color: brown;
  font-size: large;
  text-align: center;
}

.float-child {
  width: 49%;
  float: left;
  padding: 20px;
  border: 5px solid salmon;
  box-sizing: border-box; /* Include padding and border in the width */
}

<h1>Lasagna</h1>
<div class="float-container">
  <img src="images/lasagna.jpg" alt="Lasagna">
  <p>This classic lasagna recipe features a meaty sauce layered with noodles and cheese. It’s perfect for feeding a crowd or freezing for later.</p>
  <div class="float-child">
    <div class="first">
      <h3>Ingredients</h3>
      <ul>
        <li>1 pound lean ground beef</li>
        <li>1 egg (beaten)</li>
        <li>15 ounces part-skim ricotta cheese</li>
        <li>¼ cup fresh parsley (chopped)</li>
        <li>2 ½ cups shredded low-moisture part-skim mozzarella cheese (divided)</li>
        <li>½ cup grated Parmesan cheese (divided)</li>
        <li>24 ounces CLASSICO Tomato And Basil Pasta Sauce</li>
        <li>1 cup water</li>
        <li>12 lasagna noodles (uncooked)</li>
      </ul>

    </div>
  </div>
  
  <div class="float-child">
    <div class="second">
      <h3>Steps</h3>
      <ol>
        <li>Heat oven to 350°F.</li>
        <li>Brown meat in large skillet on medium-high heat. Meanwhile, combine egg, ricotta, parsley, 1-1/4 cups mozzarella and 1/4 cup Parmesan.</li>
        <li>Drain meat; return to skillet. Stir in pasta sauce. Add 1 cup water to empty sauce jar; cover with lid and shake well. Add to meat mixture; stir until blended.</li>
        <li>Spread 1 cup meat sauce onto bottom of 13x9-inch baking dish sprayed with cooking spray; top with layers of 3 lasagna noodles, 1/3 of the ricotta mixture and 1 cup of the remaining meat sauce. Repeat layers twice. Top with remaining noodles, meat
          sauce and cheeses. Cover with foil sprayed with cooking spray.</li>
        <li>Bake 1 hour or until heated through, removing foil after 45 min. Let stand 15 min. before cutting to serve.</li>
      </ol>
    </div>
  </div>
</div>

To float one left and this other right, will solve it too, but can result in unaligned divs when the viewport gets so narrow, that they wrap.