CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxvertical-alignment
user7138187
user7138187

Reputation:

Vertical align UL to top of div

I have three ul's added to a footer within bootstrap columns inside a parent row element, and I've used vertical-align:top for a similar footer before, but can't use this here to align each ul to the top of the parent div. (It's added to footer > row > .col > ul)

Any ideas?

Codepen: https://codepen.io/nickwcook/pen/aJPGeJ.

HTML:

<footer>
  <row>
    <div class="col col-sm-3">
      <ul>
        <li>Quick Menu</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="col col-sm-3">
      <ul>
        <li>Recent Posts</li>
        <li><a href="#">Post One</a></li>
        <li><a href="#">Post Two</a></li>
        <li><a href="#">Post Three</a></li>
      </ul>
    </div>
    <div class="col col-sm-3">
      <ul>
        <li>About</li>
        <li><a>Lorem ipsum dolor sit amet, vel decore vidisse an, id simul quaerendum usu. Et vis nemore mandamus. Ei pri dicit erroribus splendide. Alterum perfecto reprimique et nec, diam dolorum posidonium qui ei.</a></li>
      </ul>
    </div>
  </row>
  <row>
    <p>Developed by <a href="#">My Name</a></p>
  </row>
</footer>

CSS

footer {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: #212121;
  margin: 0;
  z-index: 99;
}

footer>row {
  display: flex;
  align-items: center;
  padding: 30px 5%;
}

footer>row:first-of-type {
  justify-content: space-between;
}

footer>row>.col {
  text-align: left;
}

footer>row>.col>ul>li:first-of-type {
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

footer>row>.col>ul {
  vertical-align: top;
  padding: 0;
}

footer>row>.col>ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

footer>row>.col ul>li {
  margin: 15px 0;
}

footer>row>.col ul>li>a {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #a5a5a5;
}

footer>row>.col ul>li>a:hover {
  text-decoration: none;
  color: #fff;
}

footer>row:last-of-type {
  background: #1f1f1f;
  display: flex;
  justify-content: center;
}

footer>row:last-of-type>p,
footer>row:last-of-type>p>a {
  font-family: 'Open Sans', sans-serif;
}

footer>row:last-of-type>p {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  color: #747475;
  font-size: 11px;
}

footer>row:last-of-type>p>a {
  color: #a5a5a5;
  text-decoration: none;
}

footer>row:last-of-type>p>a:hover {
  color: #fff;
  text-decoration: none;
}

Upvotes: 1

Views: 1095

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362840

Since you're overriding the normal Bootstap row with flexbox, use the appropriate flexbox alignment..

footer > row
{
    display: flex;
    align-items: flex-start;
    padding: 30px 5%;
}

https://codepen.io/anon/pen/peqKbj

Upvotes: 1

Related Questions