The height of this div will never exceed that of its parent div

Question

The height of this div will never exceed that of its parent div

After multiple attempts and reviewing some solutions, I'm still struggling to align the text properly within the parent div and extend the white separators to match the full length of the parent.

https://jsfiddle.net/oxgg6qrf/ <-- This is the code I've been working on, but I can't figure out why the separator divs are not extending correctly.

Here's the code snippet:

<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;}

Although there are many ids in the code, they are necessary for a future JavaScript script.

Is there a more efficient way to create a menu like this with consistent alignment? What am I overlooking?

css height html-lists separator

Answer 1

Answer №1

Your main container has a set height of 25px:

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

However, the child container does not have a specified height. To fix this, make sure to give the child container the same height as the parent container:

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

To vertically center the text, add a line-height to the list items that matches the container's height:

#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 */
}

After these adjustments, the text should now be centered in the container.

To make sure the menu dividers stretch the entire height, follow these steps:

Apply height: 25px

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..

Answer 2

Your main container has a set height of 25px:

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

However, the child container does not have a specified height. To fix this, make sure to give the child container the same height as the parent container:

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

To vertically center the text, add a line-height to the list items that matches the container's height:

#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 */
}

After these adjustments, the text should now be centered in the container.

To make sure the menu dividers stretch the entire height, follow these steps:

Apply height: 25px

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..

Answer 3

Answer №2

Check out this functional demonstration

The key adjustment made was inserting height: 25px; after eliminating unnecessary CSS classes.

There is room for improvement, but it aligns with your current requirements. I eliminated the unnecessary classes as requested.

Answer 4

Check out this functional demonstration

The key adjustment made was inserting height: 25px; after eliminating unnecessary CSS classes.

There is room for improvement, but it aligns with your current requirements. I eliminated the unnecessary classes as requested.

Answer 5

Answer №3

Here is an alternative solution to address the problem at hand. Kindly update the specified IDs with the following:

#navList {
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-left: 14px;
    }

#navList {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 14px;
}

Answer 6

Here is an alternative solution to address the problem at hand. Kindly update the specified IDs with the following:

#navList {
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-left: 14px;
    }

#navList {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 14px;
}

Answer 7

Answer №4

Another option is to add a right-hand border to each menu item and a left-hand border only to the first item.

This eliminates the need for separate div elements for menu dividers, making everything simpler.

Sample HTML:

<div id="newMenu">
    <ul id="listMenu">
        <li id="item1">Option 1</li>
        <li id="item2">Option 2</li>
        <li id="item3">Option 3</li>
    </ul>
</div>

CSS Style:

#newMenu {
    width:300px;
    height:30px;
    background-color:#444;
    color:#eee;
}

#listMenu {
    list-style-type:none;
    margin:0;
    padding:0;
}

#listMenu li {
    float: left;
    display: block;
    vertical-align: middle;
    line-height: 30px;
    padding: 0px 15px;
    border-right: 5px solid #eee;
}

/* Styling for the first list item */

#listMenu li:first-child {
    margin-left: 20px;
    border-left: 5px solid #eee;
}

Answer 8

Another option is to add a right-hand border to each menu item and a left-hand border only to the first item.

This eliminates the need for separate div elements for menu dividers, making everything simpler.

Sample HTML:

<div id="newMenu">
    <ul id="listMenu">
        <li id="item1">Option 1</li>
        <li id="item2">Option 2</li>
        <li id="item3">Option 3</li>
    </ul>
</div>

CSS Style:

#newMenu {
    width:300px;
    height:30px;
    background-color:#444;
    color:#eee;
}

#listMenu {
    list-style-type:none;
    margin:0;
    padding:0;
}

#listMenu li {
    float: left;
    display: block;
    vertical-align: middle;
    line-height: 30px;
    padding: 0px 15px;
    border-right: 5px solid #eee;
}

/* Styling for the first list item */

#listMenu li:first-child {
    margin-left: 20px;
    border-left: 5px solid #eee;
}

The height of this div will never exceed that of its parent div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to incorporate text into a div container

horizontal alignment of row content to the right in HTML

Unable to modify border color for Material-UI OutlinedInput

Achieving the perfect horizontal alignment of images

Creating tiles that can be easily stacked to the side

How to Customize PHP Date Format in Joomla 3

CSS button pressed

Ensure all division elements have the same height by utilizing a directive

Is there a way to make document flow disregard the scale attribute?

What is the best approach to implement a basic image upload functionality?

Expanding the size of one div causes the surrounding divs to shift positions

What is the best way to choose the first div when there are multiple divs with the same name?

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

What is the best way to develop an expanding line animation from this starting point?

Adjust the opacity of a div as you scroll using jQuery

particular shade for button border and background

Trouble with the display:none attribute in Firefox and Chrome

What causes my animation to “reset” upon adding a new element using innerHTML?

Ensure images are correctly aligned

Learn how to customize button styles in ExtJS with the pressedCls configuration option