Stretchable navigation cell

I am working on a navigation bar called "nav" that consists of a "ul" and "li". I have specified the display property for the "ul" as table and for the "li" as table-cell.

Setting the "ul" to take up the full width of the wrapper ensures proper alignment. However, I encountered an issue where the first cell is stretching instead of being fixed at 51px. Using max-width did not work due to the nature of tables. How can I address this problem?

#navigation {
background: #FFF;
clear: both;
margin: 0 auto 20px;
min-height: 3.5em;
min-width: 960px;
position: relative;
box-shadow: inset 0 -3px 5px -2px #d9d9dd,inset 0 -3px 5px -2px #d9d9dd;
}
#navigation ul {
list-style: none;
margin: 0;
font-size: 0;
display: table;
width: 100%;
}
#navigation>ul>li {
position: relative;
vertical-align: top;
width: 181.5px;
height: 46px;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
display: table-cell;
}
#navigation>ul>li:first-child {
width: 41px;
height: 46px;
border-left: 1px solid #d2d2d2;
min-width: 51px;
}

<nav class="sort-pages modify-pages yui3-dd-drop" id="navigation">
<h1>
<span>Navigation</span>
</h1>
<ul id="aui_3_4_0_1_286">
<!-- List items go here -->
</ul>

htmlcss

Answer №1

To achieve this layout, I recommend using flexbox:

1) Apply display:flex; to the container

2) Give all child elements flex:1; to distribute equal width and fill the container

3) Set a max-width on the first element

Check out this FIDDLE (Resize the browser to observe the effect)

ul {
  display: flex;
  width: 80%;
  border: 1px solid red;
  padding: 0;
  list-style: none;
}
li {
  flex: 1;
  border: 1px solid green;
}
.home {
  max-width: 50px;
}
<ul>
  <li class="home">Home</li>
  <li>Some text here</li>
  <li>Some text here</li>
  <li>Some text here</li>
  <li>Some text here</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with JavaScript/JQuery not functioning properly in HTML content loaded using the load() method

My goal is to load an input form from a separate file called new_machine.php into my index.php. This form includes an input with a dropdown that retrieves options from a MySQL database and displays them as anchors. The issue arises when I attempt to manipu ...

javascriptphpjqueryhtmlajax

Tips on inline password field placement for a better user interface experience?

While creating a registration form, I ran into a user interface problem. There are two specific changes I'd like to make: The label for Confirm Password should be inline on the same line. The password input should have an eye icon embedded within it ...

htmlcssreactjsbootstrap-4

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

cssresponsive-designfooter

By default, the first table row is displayed when using table grouping in AngularJS

I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...

htmlcssangularjs

Position the div within a flex container to the right side

How can I position the album cover div to the right within the card? I attempted using the align-self: end property, but it did not work. Can someone please assist? .card { border: 1px red solid; width: 450px; height: 150px; border-radius: 5px; ...

htmlcss

Curved edges, Layering, Content overflow restriction

My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a differen ...

overflowz-indexcsscss-position

Segment will expand completely upon inserting a new division

Lately, I've been trying to simplify things by consolidating my JavaScript functions into one file instead of using multiple separate files. The idea was to merge all the functions together and wrap each one in its own function so that they can be eas ...

javascripthtmlcss

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

javascripthtmlcssflashswfobject

Adapting the Homepage Based on User Authentication

Currently, I am working on a website where I am implementing a login feature. Once the user logs in successfully, they should be redirected to the index page and see something other than the login button. I have been using the following code for my implem ...

phphtmlsessionbuttonauthentication

Reveal or conceal interactive material using data attributes

I am having difficulty in achieving a certain functionality on my website. Here is the HTML code I am using: <div id="menu"></div> <ul class="countries"> <li data-country="country-1" data-countryname="France">Category France</ ...

jqueryhtml

Utilizing blend modes to invert colors

I'm working on a code where I need to change the color of certain points when they overlap with a segment, and partially change their color when hovered over by a rectangle. I attempted to achieve this using mix-blend-mode but it didn't work as e ...

htmlcssmix-blend-mode

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

Each if statement contains specific numbers to change the text color of the visited/current/active anchor link. The height of the page is dependent on its width. How can this be resolved? Apologies if my explanation is confusing, English isn't my stro ...

jqueryhtmlcss

The script fails to work correctly when displaying the data

Last night, I finally cracked the code on how to transfer data from my form on the index page to the content page, and then display the results inside the content div back on the index page. However, a new challenge has emerged. My Javascript function (re ...

javascriptphphtml

How can I retrieve a password entered in a Material UI Textfield?

My code is functioning properly, but I would like to enhance it by adding an option for users to view the password they are typing. Is there a way to implement this feature? const [email, setEmail] = useState(''); const [password, setPassword] = ...

javascripthtmlreactjstypescriptmaterial-ui

How can I link two separate webpages upon submitting a form with a single click?

Here is a snippet of my code: <form action="register.php" method="post"> <input type="text" name="uname"> <input type="submit" > </form> Within the register.php file, there are codes for connecting to a database. I am looking ...

javascriptphphtml

The link generated through ERB using link_to cannot be clicked on

When using the ERB link_to helper method to generate a hypertext link to an individual article, I am encountering an issue where the link appears as clickable in the view but is not actually clickable (the cursor does not change to a pointer). I have atte ...

htmlcssruby-on-railsruby

Animate objects as they move along the page

Modern websites often incorporate animations into their designs. I had the idea to animate elements as we scroll down the page, using a combination of JQuery, HTML, and CSS. <div class="noanimate imgleft"> </div> <div class="noanimate img ...

jqueryhtmlcss

Extracting the value of an HTML element from a string variable in AngularJS

I am facing an issue with my application where the content of an HTML element is received as a template from the server. I am attempting to assign this template, which is essentially a string, and have the variables within the template linked to the contro ...

javascripthtmlangularjs

What is the best way to update specific content with fresh URLs?

I am interested in keeping certain sections of my page static, such as the header and footer, while allowing the main content to change dynamically. Additionally, I would like the URL to update based on the new content being displayed. Although I am famil ...

htmlurlpartial

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...

javascriptphphtmldominnerhtml