CSS - My border-bottom resizes when I resize my browser

I use a border-bottom on my navigation div, which is 100% wide. When I resize my browser window, the border-bottom suddenly gets cut off to te size that I just resized my browser to.

Does anyone know a solution to this?

my css:

#nav {
clear: both;
height: 40px;
width: 100%;
text-align: center;
border-bottom: 3px #ff6600 solid;
}

#nav ul {
margin: 0 0 0 670px;
white-space: nowrap;
}

#nav ul li {
display: inline-block;
list-style-type: none;

}

#nav ul li a {
display: inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: 3.5px;
}

My html:

<div id="nav">
            <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="portfolio.html">Portfolio</a></li>
               <li><a href="hobby's">Hobby's</a></li>
               <li><a href="links.html">Links</a></li>
               <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

Answers


By assigning a margin left value of 670px, you are effectively setting a width to your page.

Thus, if the page resizes to something smaller than that (or that plus the text in the list items), it will appear that things get cut off because they extend beyond the frame of the window.

In order to have it be completely dynamic on width based on the window size, you'd need to have absolutely no hard-coded set values. You could try using a % for the margin, or you could use an alternate css style based on the width of the window.


Need Your Help

AppleScript from Java on Mac OS X 10.6?

java applescript appscript appleevents

To call AppleScript from Python, I use the "appscript" bridge: