Oliver Oliver - 6 months ago 12
HTML Question

Align divs under each other

i was looking for this but i could not find it. Basically i want align the .answer div uner each other.
The text is now like this:

Firstname:       Oliver

Lastname:         Malan

Gender:        Male


And I want it to be like this:

Firstname:     Oliver

Lastname:     Malan

Gender:         Male


CSS:



.profile-data {
padding-left: 170px;
padding-top: 50px;
}
h3.header-h3 {
font-size: 26px;
}
.data {
font-size: 20px;
margin-bottom: 15px;
border-bottom: 1px solid #666;
padding: 7px;
width: 60%;
}
.answer {
margin-left: 100px;
position: relative;
display: inline-block;
}

<div class="profil-data">

<h3 class="header-h3">Personal Info</h3>

<div class="data">
Name:
<div class="answer"><b>Oliver</b>
</div>
</div>

<div class="data">
Lastname:
<div class="answer"><b>Malan</b>
</div>
</div>

<div class="data">
Gender:
<div class="answer"><b>Male</b>
</div>
</div>

</div>




Thanks for every help!

Answer

wrap the text in a element, such as label and give a width

label {
  width: 150px;
  display: inline-block
}
.profile-data {
  padding-left: 170px;
  padding-top: 50px;
}
h3.header-h3 {
  font-size: 26px;
}
.data {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #666;
  padding: 7px;
  width: 60%;
}
.answer {
  position: relative;
  display: inline-block;
}
<div class="profil-data">

  <h3 class="header-h3">Personal Info</h3>

  <div class="data">
    <label>Name:</label>
    <div class="answer"><b>Oliver</b>
    </div>
  </div>

  <div class="data">
    <label>Lastname:</label>
    <div class="answer"><b>Malan</b>
    </div>
  </div>

  <div class="data">
    <label>Gender:</label>
    <div class="answer"><b>Male</b>
    </div>
  </div>

</div>