CSS percentage width not working

Question

CSS percentage width not working

5.8k Views Asked by Elliott Welsford At 03 April 2025 at 06:52

I've been trying to edit the CSS for my website's navbar in order to transform it from having fixed width and height values into percentage values (in order for it to become responsive and work better with different screen sizes). However, when I converted the values, the individual divs didn't correctly size.

There is probably something very simple that I've missed here (seeing as I am a self taught amateur in CSS and HTML), but I couldn't find any solutions here.

This is a JSfiddle of my naviation bar using px, working properly

This is a JSfiddle of it after conversion to percentage values for width.

Relevant code (post conversion):

HTML:

<body>
<div id="container">
    <div id="menuwrap">
        <ul id="menu">
        <li id="one"><a href="#"><h class="navbartext">one</h></a></li>
        <li id="two"><a href="#"><h class="navbartext">two</h></a></li>
        <li id="three"><a href="#"><h class="navbartext">three</h></a></li>
        <li id="four"><a href="#"><h class="navbartext">four</h></a></li>
        <li id="five"><a href="#"><h class="navbartext">five</h></a></li>
        <li id="six"><a href="#"><h class="navbartext">six</h></a></li>
        <li id="seven"><a href="#"></a></li>
        </ul>
    </div>
</div>
</body>

CSS:

#container {
    width:100%;
    height:25px;
    margin:0 auto;
    background:#fff;
}

#menuwrap {
    height:25px;
    width:100%
    position:relative;
    top:25px;
    background:#fff;
}

ul#menu {
    height:25px;
    float:right;
    margin:0;
    padding:0;
    list-style-type:none;
    background:#44546A;
}

ul#menu li {
    float:left;
}

ul#menu li a {
    display: block;
    width: auto;
    height:25px;
    overflow:hidden;
    text-indent:10px;
    background:#000;
    color:#000;
}

ul#menu li#one a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#two a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#three a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#four a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#five a {
    width:16.6%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#six a {
    width:17%;
    text-align:center;
    vertical-align: middle;
}

ul#menu li#seven a {
    width: 49px;
    height: 49px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
    background-color:#000;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    position:relative;
    top: -17.5px;
    left:88%;
    z-index:2;
}

ul#menu li class.a
{
width:208px;
margin:0px;
}

Original Q&A

There are 2 best solutions below

William McDowell On 04 July 2017 at 15:58

My web-design book, Murach's HTML5 and CSS3 3rd edition says to use slickNav for a responsive menu. It is a Javascript plugin. Also, I have just fixed my problem sort of. I was attempting to size the blocked elements when I should have been sizing their containers. Here is some sample code

nav {width:100%;}

nav #nav_menu {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
}

 #nav_menu > li {
    float: left;
    width:20%;
    max-width: 190px;
}

Hope this helps.

**TheOnlyError** · Accepted Answer

Add width: 100%; to ul#menu.

Check it out here: https://jsfiddle.net/vjhz7o8y/5/.

Also, avoid using the same id for multiple elements, use class instead.

ul#menu {
    height:25px;
    width:100%;
    float:right;
    margin:0;
    padding:0;
    list-style-type:none;
    background:#44546A;
}

CSS percentage width not working

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in NAVIGATION

Related Questions in WIDTH

Related Questions in PERCENTAGE

Trending Questions

Popular # Hahtags

Popular Questions