Is it normal for the section height to disappear when a container within a <section> is floated left?

Question

Is it normal for the section height to disappear when a container within a <section> is floated left?

I need help creating a website section with 3 containers aligned horizontally and a footer.

The containers are labeled with the class "box" and the footer is simply referred to as <footer>. The containers are nested within a section with the id "boxes".

After applying the property float: left; to the class "box", I noticed that the entire section with the id "boxes" disappears. However, the contents of the "box" class within the "boxes" section are still visible, but the <footer> seems to take over the entire region instead of just the "boxes" section.

Please refer to the image below for better understanding:

https://i.sstatic.net/5khY6.png

I would appreciate any advice on whether this behavior is normal and how I can achieve the desired style:

3 Containers aligned horizontally
Footer at the bottom

Thank you!

P.S.: Below is a snippet showcasing the issue faced. Note how the <footer> seems to overpower the

<section id="boxes">

.

#boxes .box {

    text-align: center;
    float: left;
    margin-top: 20px;
    width: 30%;
      padding: 10px;
}

#boxes .box img {
    width: 90px;
}

footer {
    float: center;
    text-align: center;
    padding: 20px;
    color: white;
    background: orangered;
}

<section id="boxes">
    <div class="box">
        <h1>SMRT Logo</h1>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHXhQgQJ6ky3JXZj-rCKJHjPXUJ6yynBkopg&usqp=CAU">
     </div>
     <div class="box">
        <h1>Pimentos Del Pardon</h1>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHXhQgQJ6ky3JXZj-rCKJHjPXUJ6yynBkopg&usqp=CAU">
     </div>
     <div class="box">
         <h1>Tomato Plant</h1>
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHXhQgQJ6ky3JXZj-rCKJHjPXUJ6yynBkopg&usqp=CAU">
     </div>
</section>

<footer>
    This is the fourth project &cc 2021
</footer>

html css css-float

Answer 1

Answer №1

float: center is not a valid CSS property. To make the footer clear the floating boxes, you should use clear: both. Here's how you can modify your code:

#boxes .box {
    text-align: center;
    float: left;
    margin-top: 20px;
    width: 30%;
    padding: 10px;
}

#boxes .box img {
    width: 90px;
}

footer {
    clear: both;
    text-align: center;
    padding: 20px;
    color: white;
    background: orangered;
}

<section id="boxes">
    <div class="box">
        <h1>SMRT Logo</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
        <h1>Pimentos Del Pardon</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
         <h1>Tomato Plant</h1>
         <img src="image-url-here">
     </div>
</section>

<footer>
    This is the fourth project &cc 2021
</footer>

Instead of using floats, consider using grid and flexbox for more modern layout options that are widely supported. Here's an example using grid layout:

#boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

#boxes .box {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
}

#boxes .box img {
    width: 90px;
}

footer {
    text-align: center;
    padding: 20px;
    color: white;
    background: orangered;
}

<section id="boxes">
    <div class="box">
        <h1>SMRT Logo</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
        <h1>Pimentos Del Pardon</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
         <h1>Tomato Plant</h1>
         <img src="image-url-here">
     </div>
</section>

<footer>
    This is the fourth project &cc 2021
</footer>

Answer 2

float: center is not a valid CSS property. To make the footer clear the floating boxes, you should use clear: both. Here's how you can modify your code:

#boxes .box {
    text-align: center;
    float: left;
    margin-top: 20px;
    width: 30%;
    padding: 10px;
}

#boxes .box img {
    width: 90px;
}

footer {
    clear: both;
    text-align: center;
    padding: 20px;
    color: white;
    background: orangered;
}

<section id="boxes">
    <div class="box">
        <h1>SMRT Logo</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
        <h1>Pimentos Del Pardon</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
         <h1>Tomato Plant</h1>
         <img src="image-url-here">
     </div>
</section>

<footer>
    This is the fourth project &cc 2021
</footer>

Instead of using floats, consider using grid and flexbox for more modern layout options that are widely supported. Here's an example using grid layout:

#boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

#boxes .box {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
}

#boxes .box img {
    width: 90px;
}

footer {
    text-align: center;
    padding: 20px;
    color: white;
    background: orangered;
}

<section id="boxes">
    <div class="box">
        <h1>SMRT Logo</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
        <h1>Pimentos Del Pardon</h1>
        <img src="image-url-here">
     </div>
     <div class="box">
         <h1>Tomato Plant</h1>
         <img src="image-url-here">
     </div>
</section>

<footer>
    This is the fourth project &cc 2021
</footer>

Is it normal for the section height to disappear when a container within a <section> is floated left?

Answer №1

Similar questions

What is the best way to adjust the width of these elements for a perfect fit?

What other aspects of mobile design could mobile-specific CSS be focused on aside from screen size?

What is the best way to trigger an onclick event for an input element with a type of "image"?

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

Error code (6) occurred during the upload process on the Google Drive website, resulting in

How can I make the expired date display in red color in a JavaScript date property?

Grow the Bootstrap column when hovered over (Similar to Netflix)

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

Floating point expansion caused by the addition of padding

Tips for maintaining the cleanliness of PHP-generated HTML output in the 'View Source' option

Utilize AngularJS to create a custom tag with a directive included

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

Google Maps introduces a new feature that creates a blur effect on

Activate hover effect on toggle button

Is there a way to utilize the passValue function twice within Javascript?

What is the proper way to utilize a variable within the translate3d function?

Tips for effectively utilizing an autocomplete input field with Vue that draws information from a database source

Looking to design an interactive grid for generating dynamic thumbnails

``Is there a way to position an image at the center in Python dash?

Is there a way to streamline the process of uploading an image and storing its details in a single HTML form with just one submit button?