Member Avatar for Monkey101 
<div style="width:100%; background-color: cornflowerblue">
            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; padding-top: 3px; padding-bottom: 3px; color: white; font-size: 20px;">About</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size: 20px;">Books</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href=""style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size: 20px;">Electronics</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Apparel</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Activities</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Student Life</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Athletics</a></li>
            </div>    

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom:     3px; font-size:20px;">Engagements</a></li>
            </div>   
    </div>

The ENGAGEMENT piece is not aligning up on my navigation bar...this is the only problem i am having

  • 2 Contributors
  • 2 Replies
  • 201 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Monkey101

Dani AI

Generated

Good summary and a small add‑on that keeps the original posts in context.

The symptom described by (one item not lining up) is exactly what happens when the combined widths exceed the container — eight items at 13% each equals 104%, so the last item wraps or overflows. Float-based, percentage layouts also trip up when padding or borders are present because the box model and overflow rules change the real rendered size. (developer.mozilla.org)

A more robust, modern pattern is to use Flexbox (no manual percent math, no floats). Example:

<nav class="site-nav">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Books</a></li>
    <!-- ... -->
    <li><a href="#">Engagements</a></li>
  </ul>
</nav>
* { box-sizing: border-box; }
.site-nav ul { margin:0; padding:0; list-style:none; display:flex; }
.site-nav li { flex:1; text-align:center; min-width:0; }
.site-nav a { display:block; padding:6px 0; color:#fff; text-decoration:none; font-size:20px; background:cornflowerblue; }

This gives equal-width items, lets them shrink gracefully, and lets flex-wrap: wrap create stacked rows on narrow viewports if desired. (developer.mozilla.org)

Troubleshooting checklist (what commonly causes one item to break away): unclosed/malformed tags; default ul margin/padding; anchors left as inline elements so vertical padding is ignored; extra horizontal padding or borders pushing width past 100%; very long unbreakable text in one item. Use browser DevTools to inspect computed widths and the box model to find which element is larger than expected. (developer.mozilla.org)

Semantics/accessibility note: wrap the list in a proper <nav> and a <ul> so assistive tech can find the navigation landmark. For major navigation blocks this is preferred over non‑semantic wrappers. (developer.mozilla.org)

Credit: good catch from on the percentage math; the Flexbox snippet above is offered as a concise, more maintainable alternative.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Well, the first issue I see is that you have 8 items each at 13% wide. Thats more than 100%, so it wont fit across your display.

Also, I'd recommendt hat you do not apply inline styles, as it makes it very difficult to make changes. You should consider using an external style sheet. Here is an example with internal styles. You also had some div elements that werent close properly and you really need to use the <ul> element in conjuction with the <li> element.

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
width:100%; 
background-color: cornflowerblue;
}

.nav ul li {
width: 12%;
float: left;
text-align: center;
height: 30px;
background-color: cornflowerblue;
list-style-type: none;
}

.nav ul li a {
text-decoration:none; 
padding-top: 3px; 
padding-bottom: 3px; 
color: white; 
font-size: 20px;
}
</style>
</head>
<body>
  <div class="nav">
    <ul>
        <li><a href="#" >About</a></li>
        <li><a href="#" >Books</a></li>
        <li><a href="#" >Electronics</a></li>
        <li><a href="#" >Apparel</a></li>
        <li><a href="#" >Activities</a></li>
        <li><a href="#" >Student Life</a></li>
        <li><a href="#" >Athletics</a></li>
        <li><a href="#" >Engagements</a></li>
    </ul>   
  </div>
</body>
</html>
Edited by JorgeM
Member Avatar for Monkey101

Thanks I actually figured out the problem took a minute !

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.