How to make a "wrappanel" in html?

Question

I'm very used to working in WPF, but I have recently started building websites in html.

I would like to make a list of things (let's say, each containing a pic and a description) in html that behave as if they are in a WPF wrappanel.

I think I almost got it right, by doing this:

<ul id="listofthings">
 <li>
  <div class="card">
   <div class="image" id="pic1">
      </div>
      <div class="description">
       <h2><a href="">Dog</a></h2>
       <p>The dog is a domesticated form of the gray wolf, a member of the Canidae family.</p>
       <a href="">Read more.</a>
      </div>
     </div>
 </li>
 <li>
  <div class="card">
   <div class="image" id="pic1">
      </div>
      <div class="description">
       <h2><a href="">Cat</a></h2>
       <p>The cat, also known as the domestic cat or housecat, is a small furry domesticated carnivorous mammal.</p>
       <a href="">Read more.</a>
      </div>
     </div>
 </li>

<!--...etc. etc.-->

</ul>

And setting the css like this:

#listofthings{
 background-color:gray;
 list-style-type:none;
}


#listofthings li{
 width: 300px;
 float: left;
}

.picture{
 background-repeat: no-repeat;
 width: 80px;
 height: 80px;
 position: absolute; 
}

.description{
 position: relative;
 top: 0;
 margin-left: 80px;
 padding-bottom: 2em;
}

So the items have been set to float left and this works fine. But I would also like the entire list to have a solid gray background. At the moment, it only shows the gray background partially. I would like the list to stretch so that it surrounds its items, I suppose? In other words, because the parent ul has a gray background, I want its children to be "on top" of that gray background. How do I do this?

TIA.

Golding

Answer 1

floats can mess up layouts so use display: inline-block instead.

#listofthings li{
 width: 300px;
 display: inline-block;
}

Woodcutter