0

So I'm trying to align two bulleted lists side by side, however they are uneven in content the first one or the one on the left has 6 listed items and the second to the right of it has 5. The one with 5 starts at the 2nd point of the 1st list whereas I want it to start at the first evenly.

I have them in divs with their borders color'd to help see where things are lining up, I also have a gap between the two lists which I don't understand why it's there. My makeshift solution is to throw a </br> tag at the top but would like to know the actual way to solve this, thanks :)

body {
  background-color: black
}

div.SubjectsBox {
  border: solid orange 1px;
  margin-left: 3%;
  margin-right: 3%;
}

div.Subjects {
  border: solid purple 1px;
  display: inline-block;
  color: white;
}
<div class="SubjectsBox">
  <div class="Subjects">
    <ul>
      <li>Subject1</li>
      <li>Subject2</li>
      <li>Subject3</li>
      <li>Subject4</li>
      <li>Subject5</li>
      <li>Subject6</li>
    </ul>
  </div>
  <div class="Subjects">
    <ul>
      <li>Subject1</li>
      <li>Subject2</li>
      <li>Subject3</li>
      <li>Subject4</li>
      <li>Subject5</li>
    </ul>
  </div>
</div>

Final thing: Should I be using em instead of %?

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
Laggy
  • 3
  • 2

2 Answers2

0

body {
  background-color: black
}

div.SubjectsBox {
  border: solid orange 1px;
  margin-left: 3%;
  margin-right: 3%;
}

div.Subjects {
  border: solid purple 1px;
  display: table-cell;
  color: white;
}
<div class="SubjectsBox">
  <div class="Subjects">
    <ul>
      <li>Subject1</li>
      <li>Subject2</li>
      <li>Subject3</li>
      <li>Subject4</li>
      <li>Subject5</li>
      <li>Subject6</li>
    </ul>
  </div>
  <div class="Subjects">
    <ul>
      <li>Subject1</li>
      <li>Subject2</li>
      <li>Subject3</li>
      <li>Subject4</li>
      <li>Subject5</li>
    </ul>
  </div>
</div>

try "table-cell" instead of "inline-block"

gandalf
  • 41
  • 2
0

body {
  background-color: black
}

div.SubjectsBox {
  border: solid orange 1px;
  margin-left: 3%;
  margin-right: 3%;
}

div.Subjects {
  border: solid purple 1px;
  display: inline-block;
  color: white;
  vertical-align: top; //this will fix your problem
}
<div class="SubjectsBox">
  <div class="Subjects">
    <ul>
      <li>Subject1</li>
      <li>Subject2</li>
      <li>Subject3</li>
      <li>Subject4</li>
      <li>Subject5</li>
      <li>Subject6</li>
    </ul>
  </div>
  <div class="Subjects">
    <ul>
      <li>Subject1</li>
      <li>Subject2</li>
      <li>Subject3</li>
      <li>Subject4</li>
      <li>Subject5</li>
    </ul>
  </div>
</div>
Alxbrla
  • 71
  • 1
  • 8