css block has zero height

Question

I have a div thumbnails which floats a number of sub divs cell. Below that, I want to display another div title. Instead of displaying below, it is displaying in a new column to the right of thumbnails. Why ?

The thumbnails div is reporting zero height, although the actual cell divs are displaying properly.

Here is (I hope) the relevant part of my CSS

.thumbnails {display:block; margin-left:50px; margin-bottom:10px}

.cell {float:left; width:350px; height:350px;
       display:flex; justify-content:center; align-items:center;
       z-index:0;}

.title {margin:auto; padding-top:10px; padding-bottom:10px; text-align:center; }

And, here's a snip of the html:

<body ...>
<div id="paintings">
  <div class=menu-bar>
    ...
  </div>

  <div class=title>
    ...
  </div>

  <div class=thumbnails>
    <div class=cell>
      ...
    </div>
    ...
  </div>

  <div class=title>
    <p>...</p>
  </div>
  ...
</body>

NB: it's the second title div that doesn't display properly, because the height of the thumbnails div is zero.

Request to reopen: if someone has a zero-height div problem, they are not going to know to search for "clearfix". In other words, if you already knew you needed to add "clear:both" you wouldn't be searching for a solution. If people wish to maintain this question as duplicate, I suggest adding text to the other questions about zero-height divs. — Peri Hartman, Jun 18 '21 at 23:21

Hossein Azizdokht · Accepted Answer · 2021-06-18T17:46:33.290

You must set clear:both after thumbnails tag

    .thumbnails {display:block; margin-left:50px; margin-bottom:10px}

    .cell {float:left; width:350px; height:350px;
           display:flex; justify-content:center; align-items:center;
           z-index:0;}

    .title {margin:auto; padding-top:10px; padding-bottom:10px; text-align:center; }
    .clear{clear:both}

    <body ...>
    <div id="paintings">
      <div class=menu-bar>
       sdfsdf
      </div>

      <div class=title>
        sdfsdf
      </div>

      <div class=thumbnails>
        <div class=cell>
          sdfsdf
        </div>
        sdfsdf
      </div>
<div class="clear"></div>
      <div class=title>
        <p>sdfsdf</p>
      </div>
      sdfsdf
      
    </body>

css block has zero height

1 Answers1