Member Avatar for ajwei810192

Hi,

I have a snippet of CSS as follows:

#navbar {
    position: absolute;
    top: 75px;
    right: 4px;
    padding: 2px 0 2px 32px;
    white-space: nowrap;
    background: #629632;
}
#navbar ul {
    display:block;
    font-size:12px;
    height:1px;
    list-style:none;
    padding-bottom:1.3em;
}
#navbar a {
    display:block;
    text-decoration:none;
    color:#FFFFFF;
    font-size:12px;
    font-weight:bold;
    padding: 2px 0.5em 1px;
    width:8em;
}
#navbar a:hover {color:yellow;}
#navbar li {
    float:left;
    font-size:12px;
    width:8em;
    list-style-type:none;
}
#navbar li ul {display:none;font-size:12px;}
#navbar li:hover ul {
    position:absolute;
    display:block;
    width:8.01em;
    color:blue;
    font-size:12px;
}

Here is my HTML snippet:

<div id="navbar">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Me</a></li>
                    <li><a href="work.html">Work Samples</a></li>
                    <li><a href="mail.php">Contact Me</a></li>
                </ul>
            </div>

For some reason, when I look at the output on the browser, it looks like there is a huge gap between Home and About Me, and very little spacing between Work Samples and Contact Me. I tried padding-left, padding-right, but they don't seem to work. Could anyone please give me some suggestion on what I might have missed here so I could keep the same spacing between the 4 elements?

Thanks for your help.

  • 3 Contributors
  • 4 Replies
  • 94 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Jansz36

Dani AI

Generated

The symptom described (uneven gaps between floated list items) usually comes from mixing fixed widths, element padding, and the default CSS box model. Floated li elements plus a block a that also has a width and horizontal padding can make one item effectively wider than its container; that pushes the next float and creates uneven spacing. s workaround (removing the fixed widths) is exactly the quick fix; s question about whether position:absolute was necessary is also on point — absolute positioning often complicates layout unnecessarily. s table idea will work, but tables are not ideal for responsive navs.

Practical checklist and suggestions:

  • Reset the list defaults: margin:0; padding:0; list-style:none; so browser indents do not interfere.
  • Avoid setting fixed widths on both the li and the inner a. If you must use widths, switch to box-sizing: border-box so padding does not add to the width.
  • Prefer modern layout: use Flexbox to get consistent spacing without floats.

Example (modern, simple):

/* reset */
.navbar ul { display:flex; gap:1rem; margin:0; padding:0; list-style:none; }

/* anchor sizing */
.navbar a { display:block; padding:0.25rem 0.5rem; box-sizing:border-box; }

/* optional: make items stretch or use space-between */
.navbar ul { justify-content:space-between; }

Troubleshooting tips: use the browser devtools "Computed" box to see actual widths, paddings and margins; temporarily remove width rules to see how items flow; replace floats with display:inline-block or Flexbox for predictable spacing.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

Really need to use absolute? Want to post your url? Perhaps that'll help.

Member Avatar for ajwei810192

Really need to use absolute? Want to post your url? Perhaps that'll help.

Hi,

I somehow did a work around by taking the width out in my elements, so it looks like now it is working. Thanks.

Member Avatar for Member #120589

OK - although you seem to have solved it yourself, mark it solved so that others don't waste their time fixing the fixed. Cheers.

Member Avatar for Jansz36

I had similar problem. Finally I have added inside a Div layer table column(s) which make sure any image or text stay as you have positioned. Hope this helps for other...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.