This div height is always smaller than the parent div

Question

So I've tried quite a few attempts while looking at some answers here, but I can't seem to align the text fully in the parent div and to make the white separators be the full length of the parent div.

https://jsfiddle.net/oxgg6qrf/ <-- This is my attempt, but I'm not sure what is forcing the separator div to be smaller.

Code is below:

<div id="ambMenu">
    <ul id="ulMenu">
        <li id="liMenuBar1"><div class="ambMenuDivider"></div></li>
        <li id="liMenuOption1">Test1</li>
        <li id="liMenuBar2"><div class="ambMenuDivider"></div></li>
        <li id="liMenuOption2">Test2</li>
        <li id="liMenuBar3"><div class="ambMenuDivider"></div></li>
        <li id="liMenuOption3">Test3</li>
        <li id="liMenuBar4"><div class="ambMenuDivider"></div></li>
    </ul>
</div>

#ambMenu { width: 360px; height: 25px; background-color: #333; color: #f2f2f2; }
#ulMenu { list-style-type: none; margin: 0; padding: 0; display: inline-block; }
#liMenuBar1 { padding-left: 30px; float: left; display: inline-block; margin: 0; }
#liMenuBar2, #liMenuBar3, #liMenuBar4 { float: left; display: inline-block; margin: 0; padding-left: 10px; padding-right: 5px; }
#liMenuOption1, #liMenuOption2, #liMenuOption3 { float: left; display: inline-block; margin: 0; vertical-align: middle; }
.ambMenuDivider { border-left:5px solid #f2f2f2; display: inline; padding-left: 5px; padding-right: 5px;}

I know there's a lot of ids, but I need them later for a js script.

Is there a better way to create a menu of this sort with this aspect? Or what am I missing?

Answer 1

Your primary container has a specified height of 25px:

#ambMenu { 
    width: 360px; 
    height: 25px; /* height of container */
    background-color: #333; 
    color: #f2f2f2;
}

But your child container has no height specified. So, first step, give the child container the same height as the parent container:

#ulMenu {
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    height: 25px; /* new */
}

In order to vertically center the text apply a line-height to the list items equal to the height of container:

#liMenuBar1 { 
    padding-left: 30px; 
    float: left; 
    display: block; 
    margin: 0;
    line-height: 25px; /* new */
}

#liMenuBar2, #liMenuBar3, #liMenuBar4 { 
    float: left; 
    display: block; 
    margin: 0; 
    padding-left: 10px; 
    padding-right: 5px;
    line-height: 25px; /* new */
}

#liMenuOption1, #liMenuOption2, #liMenuOption3 {
    float: left; 
    display: block; 
    margin: 0; 
    vertical-align: middle;
    line-height: 25px; /* new */
}

.ambMenuDivider { 
    border-left:5px solid #f2f2f2; 
    display: inline; 
    padding-left: 5px; 
    padding-right: 5px;
    line-height: 25px; /* new */
}

Now the text is vertically centered in the container.

To get the menu dividers to stretch the entire height, you need to make two adjustments:

1. Apply height: 25px

2. Change display: inline to display: inline-block ^*

   .ambMenuDivider { 
       border-left:5px solid #f2f2f2; 
       display: inline-block; /* adjusted */
       padding-left: 5px; 
       padding-right: 5px;
       line-height: 25px; /* new */
       height: 25px; /* new */
   }
   

DEMO: https://jsfiddle.net/oxgg6qrf/2/

^* You cannot apply height to inline elements..