Two html & css elements need to be lined up horizontally

Question

I have run into a problem that I just can't seem to find a solution for. I am trying to have two tags line up with each other horizontally. Each will hold a list.

I would like to move the red box so it is in line with the blue box. Move red box I also need the list centered in the middle of the box (where the line is) I have tried to achieve aligning the boxes in multiple ways, one of those including "float: left;" All it seems to do is add some padding to the box.

I have also tried using absolute value and relative positioning, but it either did not scale very well or did not line up.

As for centering the text, I have tried many ways. I tried using "text-align: center;" but that did not move the dots. The words are also aligned strangely on the blue side. I also tried using "margin-left: %50;" but that did not center it perfectly, but rather put it too far to the right.

My current code is as follows:

#list {
  background: blue;
  width: 50%;
}

#list2 {
  background: red;
  width: 50%;
  margin-left: 50%;
}

#ingredients {
  text-align: center;
}

#equipment {
  text-align: center;
}

<html>
  <body>

    <div id="list">
      <h3 id="ingredients">Ingredients</h3> 

      <ol>
        <li>Bread</li>
        <li>Some sort of spread (examples below)
          <ul>
            <li>Nutella</li>
            <li>Penut butter</li>
            <li>Jelly</li> 
         </ul>
        </li>
       <li>Some common sense</li>
       </ol>
    </div>

    <div id="list2">
      <h3 id="equipment">Equipment needed</h3>
      <ul> 
        <li>A toster or toser oven</li>
        <li>A knife to spread your spread</li>
      </ul>
    </div>

  </body>
</html>

Any and all help is very appreciated! Thanks, - Riley

jarrodwhitley · Accepted Answer · 2018-12-13T19:42:27.180

I would definitely suggest looking into using CSS Grid. It's awesome.

Edit: If you're going to downvote my answer at least take the time to say why you did. As far as I can see (and form OP's response) I'm answering his question.

* {
  color: #666;
  font-family: sans-serif;
  }

#list {
  border: 2px solid red;
  }

.page-grid {
  display: grid;
  grid: 1fr / 1fr 1fr;
}
.grid-row-1 {
  display: grid;
  grid: 1fr /1fr;
  justify-items: center;
  align-items: start;
  background-color: #dadada;
  border: 2px solid blue;
}
.grid-row-2 {
  display: grid;
  grid: 1fr /1fr;
  justify-items: center;
  align-items: start;
  background-color: #ececec;
  border: 2px solid blue;
}

<html>

<body>
  <div class="page-grid">
    <div class="grid-row-1">

      <div id="list">
        <h3 id="ingredients">Ingredients</h3>
        <ol id="test">
          <li>Bread</li>
          <li>Some sort of spread (examples below)
            <ul>
              <li>Nutella</li>
              <li>Penut butter</li>
              <li>Jelly</li>
            </ul>
          </li>
          <li>Some common sense</li>
        </ol>
      </div>
    </div>
    <div class="grid-row-2">
      <div id="list">
        <h3 id="equipment">Equipment needed</h3>
        <ul id="test2">
          <li>A toaster or toaster oven</li>
          <li>A knife to spread your spread</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

To center the text you'd want to add `text-align:center;` to the parent container, but that's going to look funky with bullet points and lines of different length. — jarrodwhitley, Dec 12 '18 at 16:35
Is there any other way to center the text that does not distort the alignment of the text? — Sour_Tooth, Dec 12 '18 at 20:32
I'm not 100% certain what you're wanting in terms of text alignment, but if you're wanting your text to remain aligned left, but to keep that block centered you'll need to put your text in another container (`red`). The `red` containers are set to `justify-items: center`. This centers the `red` container horizontally within its grid column. I've updated my snippet to demonstrate this. — jarrodwhitley, Dec 13 '18 at 19:33

Two html & css elements need to be lined up horizontally

1 Answers1