HTML/CSS navigation buttons with multiple text paragraphs

Question

As you can see in the picture, I'm trying to do navigation buttons with 2 different texts. The problem is that I can't find a way to align the second text if the Title is longer than the others. I'm open to suggestions.

I want all of the underlined texts to be at same height. Here is HTML I tried doing it in many ways so i just uploaded the latest one.

 <!doctype html>
 <html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">

      <title>Test</title>

      <!-- CSS -->
       <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
       <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- custom       styles -->

      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>

      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">

      <!-- HEADER -->
        <header> <img src="images/trolltunga.jpg" id="header-image" alt="Header">  </header>
        <nav class="navbar navbar-inverse">
    <!-- ANGULAR HANDLES THE ROUTING HERE -->
          <ul class="nav navbar-nav">
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Pradžia</div> <div class="navbar-button-description">apie viską trumpai</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Pradedantiems Verslą</div> <div class="navbar-button-description">sklandžiai</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Buhalterinė Apskaita</div> <div class="navbar-button-description">Pagal mus</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Mokesčių Optimizavimas</div> <div class="navbar-button-description">tekstas</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Verslo Procesai</div> <div class="navbar-button-description">tekstas</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Apie Sudėtingus Dalykus Paprastai</div> <div class="navbar-button-description">klauskite</div></div> </a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Kainos</div> <div class="navbar-button-description">tarkimės</div></div></a></li>
          </ul>
        </nav>

        <!-- ANGULAR DYNAMIC CONTENT -->
        <div ng-view></div>

      </div>
   </body>
</html>

As for my CSS file:

#header-image{
  display:block;
  margin:auto;
}
.navbar-button{
  border-style: solid;
  background-color: teal;
  width: 8vw;
  height: 14vh;
}
.navbar-button-name{
  margin-top:15%;
  font-weight: bold;
  text-align: center;
  color: blue;
}
.navbar-button-description{
  text-decoration: underline;
  text-align: center;
  color: blue;
  display: flex;
  justify-content: center;
  align-items: flex-end;

}

.nav.navbar-nav{
  background-color: white;
  border-style: none;
}
.nav{
  width:100%;
  border-style: none;
}

.rounded-div{
  border-radius:100%;
  border: 2px solid #73AD21;
  height: 100px;
  width: 100px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-view{
  height: 110px;
}

score 2 · Accepted Answer · edited Dec 06 '16 at 22:16

I'll list three different ways to accomplish what you want:

METHOD 1:
Add some padding-top to all descriptions except for the second from the last button. Your second to last button has the longest title, thus the lowest description, so you want to push all the other buttons' descriptions down to match it.

First, add a new class to your second to last button cancel out any padding changes you add to .navbar-button-descriptions (because you don't want any more padding on your second to last button):

HTML:

         <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Apie Sudėtingus Dalykus Paprastai</div> <div class="navbar-button-description noPaddingTop">klauskite</div></div> </a></li>

CSS:

.noPaddingTop {
    padding-top: 0;      
}

NOTE:
In your CSS file, make sure .noPaddingTop is listed after (below) your .navbar-button-description class, or else it wont work. This is because the browser reads your CSS file from top to bottom, so listing .noPaddingTop after .navbar-button-description means .noPaddingTop will be interpreted by the browser last and will overwrite and cancel out the padding on your second to last button, like you want:

Then, add padding-top to all your other navbar-button descriptions:

CSS

    .navbar-button-description {
        padding-top: ???px;     /* Pick and choose different pixel amounts until your descriptions are lowered where you want them to be. */ 
}

METHOD 2:
Decreasing the font-size of the second to last button title so that it is 2 lines tall rather than 3 lines tall, then use METHOD 1 (padding-top) on all the button descriptions that have a 1 line Title. So:

Add a new class to the second to last button, then in that class, adjust the font size:

HTML

     <li><a href="/"><div class="navbar-button"><div class="navbar-button-name smallerFont">Apie Sudėtingus Dalykus Paprastai</div> <div class="navbar-button-description">klauskite</div></div> </a></li>

CSS

    .smallerFont {
       font-size: ???px /* pick a smaller font size than your other title descriptions */
}

If you use this method, you might still have to use the first method (padding-top) to help you line up the other descriptions some. But, having different sized title font sizes might not be ideal, so I'd try the first method over this.

METHOD 3:
A third option, if you are open to changing your button widths:

CSS:

.navbar-button {
    width: ??vw;  /*use a number larger than 8 which you currently have, or change it to a pixel amount until the buttons are wide enough to accomodate all the title text on one line*/ 
}

I was hopping to achieve some sort of automation for this, because in the future the site would be moderated by an admin which has 0 knowledge in programming. So if they change second button title to longer everything will be broken because the css will be left unchanged. — ryrius, Dec 06 '16 at 04:59
I would suggest trying the method from the top answer here: http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom Although this way could prove even more problematic if not executed properly or if your admin makes the wrong changes. It's just not the ideal situation to have nobody upkeeping the code, so the solution might not be ideal if you can't tweak things as you go. Keep in mind that the answers posted here don't represent all of the potential solutions, so you could keep looking at other StackOverflow threads. Good luck! — Kyle Vassella, Dec 07 '16 at 11:25

score 1 · Answer 2 · answered Dec 03 '16 at 17:48

You can use the CSS property Flexbox for this.

HTML:

<div class="btn-wrapper">
  <btn class="normal-text">Normal text</btn>
  <btn class="normal-text">Normal text</btn>
  <btn class="normal-text">Normal text</btn>
  <btn class="long-text">Very very very long text</btn>
</div>

CSS:

.btn-wrapper {
  width: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
}
.normal-text, .long-text {
  display: block;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 20px;
}

Here's the jsfiddle I made for you.

Keep in mind that Flexbox has some bugs with IE11 and below.

Here's the Flexbox compatibility according to caniuse.
Here's a guide that I like on Flexbox.

HTML/CSS navigation buttons with multiple text paragraphs

2 Answers2