Cannot adjust the height of container accordingly to the content

Question

I have this CSS project I am working on and now I am in the phase where I will start to embelish it with some effects and nice colors. However I just realized that there is a small issue with it: the beige container won't adjust its height as the blue cells move around. Could anyone help please? Here it is my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="OEPanel.js"></script>
        <link rel="stylesheet" href="./OEPanel.css">
    <title>Document</title>
</head>

<body>
    <div id="oepanelcontainer" class="OEContainer">
    <div id="oepanel" class="OEItems">
        <div id="oecell1" class="OECell"></div>
        <div id="oecell2" class="OECell"></div>
        <div id="oecell3" class="OECell"></div>
        <div id="oecell4" class="OECell"></div>
    </div>
</body>
</html>

CSS

.OEContainer {
    background-color: beige;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}

.OEItems {
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}

.OECell {
    background-color: lightblue;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

@media (max-width: 500px) {
    .OEContainer {
        flex-direction: column;
        align-items: center;
    }
}

JS

// config
var __OECELLS = 4; // the total of oecells in HTML (oecell1, oecell2...)
var __CELLWIDTH = 250; // the width of cells in pixels
var __MAXSCREENWIDTH = 1130;  // the maximum width of screen in pixels

var __MAXCELLS = parseInt(__MAXSCREENWIDTH/__CELLWIDTH);
var __ADJUSTMENT = (__CELLWIDTH-30)/2;
var __CELLSPERROW;

$(function() {
    RedefinePanel();
});

$(window).resize(function() {
    RedefinePanel();
});

function RedefinePanel() {
    var viewportWidth = $(window).width();
    let __CELLSPERROW = parseInt((viewportWidth-__ADJUSTMENT)/__CELLWIDTH);
    document.getElementById("oepanel").style.width = ((__CELLSPERROW)*__CELLWIDTH+(__CELLSPERROW*17)) + "px";

Thanks!

Lynel Hudson · Accepted Answer · 2021-06-15T23:11:06.327

You need a clearfix for the container of your floated items.

.OEContainer {
    background-color: beige;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}

.OEItems {
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}

.clearfix::after { /* clearfix class to expand the element back to its normal height */
  content: '';
  display: block;
  clear: both;
}

.OECell {
    background-color: lightblue;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

@media (max-width: 500px) {
    .OEContainer {
        flex-direction: column;
        align-items: center;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="OEPanel.js"></script>
        <link rel="stylesheet" href="./OEPanel.css">
    <title>Document</title>
</head>

<body>
    <div id="oepanelcontainer" class="OEContainer">
    <div id="oepanel" class="OEItems clearfix"> <!-- clearfix class added here -->
        <div id="oecell1" class="OECell"></div>
        <div id="oecell2" class="OECell"></div>
        <div id="oecell3" class="OECell"></div>
        <div id="oecell4" class="OECell"></div>
    </div>
</body>
</html>

When you use floats for all of the children of an element - it will collapse 0 height ( minus padding and margins etc ) unless you force it to expand to the size of it's children with a clearfix. Essentially it's a bug/quirk in browsers that's been persistent for a while.

Although this answers your questions I would advise against using floats wherever possible and use flexbox instead. Overall a lot less messy than floats in my opinion.

Cool **dev-sandbox**! It worked perfectly... I always have seen this *clearfix* class but never manager to understand what it really does because the name is not too much intuitive. So it should ALWAYS be used in the parent div when it refuses to adjust itself to the new positioning of its childs? Thanks a lot again! :-) — Yan Kleber, Jun 16 '21 at 13:18
@YanKleber You only need to use a clearfix when ALL your child elements are floated causing their parent to collapse its height to 0. No prob. — Lynel Hudson, Jun 18 '21 at 16:47

Cannot adjust the height of container accordingly to the content

1 Answers1