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>>Solution :
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.