Lists at wierd locations

brooke_theperson · January 10, 2016

So I have multiple divs each containing a list and the headers in each div, above the list are all at different y places. The lists with the most info have higher y positions and therefore are higher up on the page. How do I make it so the headers are in line with eachother? (If you copy this code, and add a heading and stuff you can open it up in firefox and see what im talking about)

<style>
h2{
    text-decoration: underline;
    margin-top: -30px;
}
.anke{
    display: inline-block;
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
}
.father{
    display: inline-block;
    margin-left: 120px;
    font-family: corsiva;
    font-size: 20px;
}
.mother{
    display: inline-block;
    margin-left: 120px;
    font-family: corsiva;
    font-size: 20px;
}
.brother{
    display: inline-block;
    margin-left: 120px;
    font-family: corsiva;
    font-size: 20px;
}
.sister{
    display: inline-block;
    margin-left: 120px;
    font-family: corsiva;
    font-size: 20px;
}
.others{
    display: inline-block;
    margin-top: 20px;
    margin-left: 120px;
    font-family: corsiva;
    font-size: 20px;
}
</style>
<body>
<div class = 'anke'>
     <h2>Anke</h2>
          <ul>
               <li>Main Character</li>
               <li>Doesn't fit in with family</li>
               <li>Isn't abused</li>
               <li>Isn't loved</li>
               <li>Loves to play volleyball</li>
               <li>Is smart</li>
          </ul>
</div>
<div class = 'father'>
     <h2>Father</h2>
          <ul>
               <li>Abusive</li>
               <li>Moody</li>
               <li>Mood Swings</li>
               <li>Loves his wife</li>
               <li>Often drunk</li>
          </ul>
</div>
<div class = 'mother'>
     <h2>Mother</h2>
          <ul>
               <li>Sweet Mother</li>
               <li>Loves her children</li>
               <li>Takes care of husband</li>
               <li>Secretly scared</li>
          </ul>
</div>
<div class = 'sister'>
     <h2>Sister</h2>
          <ul>
               <li>Name is Yaicha</li>
               <li>Older Sister</li>
               <li>Likes makeup</li>
               <li>Constantly abused</li>
          </ul>
</div>
<div class = 'brother'>
     <h2>Brother</h2>
          <ul>
               <li>Name is Darren</li>
               <li>Older Brother</li>
               <li>Constantly abused</li>
          </ul>
</div>
<div class = 'others'>
     <h2>Other Characters</h2>
          <ol>
               <li>Angelina
                    <ul>
                         <li>Annoying 'friend' of Anke</li>
                         <li>Very innocent</li>
                         <li>Doesn't have a dad</li>
                         <li>Likes Anke's dad (as a father)</li>
                    </ul>
               </li>
          </ol>
</div>
</body>

Edited January 10, 2016 by brooke_theperson

Don E · January 10, 2016

Something like this?:

<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>brook</title>
</head>


<style>
h2{
    text-decoration: underline;
    margin-bottom: 30px;
}
.anke{
    display: inline-block;
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
    overflow: hidden;
    float: left;
}
.father{
    display: block;
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
    overflow: hidden;
    float: left;
}
.mother{
    display: block;
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
    overflow: hidden;
    float: left;
}
.brother{
    display: block;
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
    overflow: hidden;
    float: left;
    clear: left;
}


.sister{
    display: block;
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
    overflow: hidden;
    float: left;


}
.others{
    display: block;
    /*margin-top: 20px;*/
    margin-left: 60px;
    font-family: corsiva;
    font-size: 20px;
    overflow: hidden;
    float: left;
}
</style>
<body>
<div class="anke">
     <h2>Anke</h2>
          <ul>
               <li>Main Character</li>
               <li>Doesn't fit in with family</li>
               <li>Isn't abused</li>
               <li>Isn't loved</li>
               <li>Loves to play volleyball</li>
               <li>Is smart</li>
          </ul>
</div>
<div class="father">
     <h2>Father</h2>
          <ul>
               <li>Abusive</li>
               <li>Moody</li>
               <li>Mood Swings</li>
               <li>Loves his wife</li>
               <li>Often drunk</li>
          </ul>
</div>
<div class="mother">
     <h2>Mother</h2>
          <ul>
               <li>Sweet Mother</li>
               <li>Loves her children</li>
               <li>Takes care of husband</li>
               <li>Secretly scared</li>
          </ul>
</div>
<div class="sister">
     <h2>Sister</h2>
          <ul>
               <li>Name is Yaicha</li>
               <li>Older Sister</li>
               <li>Likes makeup</li>
               <li>Constantly abused</li>
          </ul>
</div>
<div class="brother">
     <h2>Brother</h2>
          <ul>
               <li>Name is Darren</li>
               <li>Older Brother</li>
               <li>Constantly abused</li>
          </ul>
</div>
<div class="others">
     <h2>Other Characters</h2>
          <ol>
               <li>Angelina
                    <ul>
                         <li>Annoying 'friend' of Anke</li>
                         <li>Very innocent</li>
                         <li>Doesn't have a dad</li>
                         <li>Likes Anke's dad (as a father)</li>
                    </ul>
               </li>
          </ol>
</div>
</body>
</html>

Sign In

Lists at wierd locations

Recommended Posts

brooke_theperson

Link to comment

Share on other sites

Don E

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity