Shinji-san Shinji-san - 6 months ago 9
HTML Question

How to left/right align elements but also adjust vertical height

I tried many things like floating my elements and vertical aligning and it's not working; basically I am trying to have 10 p elements inside of a box, one half on the left side of the box, and one half on the right side of the box. But instead what happens is that when I get to the fifth element, it doesn't revert back to the top even when I add 'vertical-align: text-top' to it.

Does anybody know how to align this? Also what if I were to change it to li elements? Would that change things up, because I'm thinking about simply bulleting them; would look nicer.



.TargetBox {
width: 70%;
margin: auto;
height: 300px;
background-color: black;
color: #66ff33;
border-radius: 5px;
text-align: center;
margin-bottom: 40px;
}
.Explainer {
width: 70%;
height: 300px;
margin: auto;
background-color: black;
color: #66ff33;
text-align: center;
border-radius: 5px;
}
.leftColumn {
text-align: left;
vertical-align: text-top;
}
.rightColumn {
text-align: right;
vertical-align: text-top;
}

<div class="TargetBox">
<h1> Target Box </h1>
<p class="leftColumn">one:</p>
<p class="leftColumn">two:</p>
<p class="leftColumn">three:</p>
<p class="leftColumn">four:</p>
<p class="rightColumn">five:</p>
<p class="rightColumn">six:</p>
<p class="rightColumn">seven:</p>
<p class="rightColumn">eightt:</p>
<p class="rightColumn">nine:</p>
<p class="rightColumn">10:</p>
</div>




Answer

you could use float and clear :

.TargetBox {
  width: 70%;
  margin: auto;
  height: 300px;
  background-color: black;
  color: #66ff33;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 40px;
}
.Explainer {
  width: 70%;
  height: 300px;
  margin: auto;
  background-color: black;
  color: #66ff33;
  text-align: center;
  border-radius: 5px;
}
.leftColumn {
  text-align: left;
  vertical-align: text-top;
  float:left;
  clear:left;
}
.rightColumn {
  text-align: right;
  vertical-align: text-top;
  overflow:hidden;
}
<div class="TargetBox">
  <h1> Target Box </h1>
  <p class="leftColumn">one:</p>
  <p class="leftColumn">two:</p>
  <p class="leftColumn">three:</p>
  <p class="leftColumn">four:</p>
  <p class="rightColumn">five:</p>
  <p class="rightColumn">six:</p>
  <p class="rightColumn">seven:</p>
  <p class="rightColumn">eightt:</p>
  <p class="rightColumn">nine:</p>
  <p class="rightColumn">10:</p>
</div>

Comments