0

I'm trying to create a floated list of items, and these are broken up into 2 sections.

The problem is, the margin I am applying to give some space between to 2 divs is not working correctly, due to the floated items I think.

https://jsfiddle.net/hc7muswj/

I want some space between the first list and the next H2.

How do I make the first div have "solidity" to allow me to margin bottom from it?

.lozzy {
  width: 300px;
  margin-bottom: 20px !important;
}

.lozzy h2 {
  clear: both;
}

.lozzy ul {
  padding-left: 0px !important;
}

.lozzy ul li {
  width: fit-content;
  float: left;
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px !important;
  font-size: 16px!important;
  color: #f3f3f3;
  background-color: #404040;
  display: inline-block;
}
<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
Michael Hobson
  • 1

2 Answers2

0

Floated elements will by default not be wrapped by their containers. (If you add a border or background to .lozzy you'll see what I mean.)

Add overflow: auto; to the container element (.lozzy) to make it wrap (i.e. contain) the floated items (and thereby have the margin-bottom you defined)

.lozzy {
  width: 300px;
  margin-bottom: 20px !important;
  overflow: auto;
}

.lozzy h2 {
  clear: both;
}

.lozzy ul {
  padding-left: 0px !important;
}

.lozzy ul li {
  width: fit-content;
  float: left;
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px !important;
  font-size: 16px!important;
  color: #f3f3f3;
  background-color: #404040;
  display: inline-block;
}
<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

By the way: Having float: left and display: inline-block; on the same element is superfluous. You can solve your problem also by simply deleting the float: left since display: inline-block; will bring you a very similar result. In this case you won't need the overflow setting on the container which I used in the snippet above:

.lozzy {
  width: 300px;
  margin-bottom: 20px !important;
}

.lozzy h2 {
  clear: both;
}

.lozzy ul {
  padding-left: 0px !important;
}

.lozzy ul li {
  width: fit-content;
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px !important;
  font-size: 16px!important;
  color: #f3f3f3;
  background-color: #404040;
  display: inline-block;
}
<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

The issue is because of float. float is not supposed to be used for styling purpose. It is a mis-used hack. Use flexbox-instead. Float is for floating images within a text paragraph. Your intended layout can be achieved the evry same with the actual right tool of Flexbox.

For that add: .lozzy ul { display: flex; flex-wrap: wrap; }.

Also dont use so many !important;. They are nearly always (with exeptions of overwriting templates etc.) an indication that something is done wrong. That an issue is rather hidden the resolving the issue. For example like you hide the list-bullets with !important. You could simply use list-style: none;

.lozzy {
  width: 300px;
  margin-bottom: 20px;
}

.lozzy ul {
  padding-left: 0px;
  display: flex;
  flex-wrap: wrap; 
  list-style: none;
}

.lozzy ul li {
  padding: 5px 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px;
  color: #f3f3f3;
  background-color: #404040;
}
<div class="lozzy">
  <h2>Skills</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>

<div class="lozzy">
  <h2>Toolkit</h2>
  <ul>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
    <li>Fourth thing</li>
    <li>Fifth thing</li>
  </ul>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34