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.


I've found the answer!

By looking at other posts, someone said that the 100% width only applies to the 'viewport' of the screen. So thats why the div gets cut off.

To solve this you have to add a min-width in pixels to the body in css.

So in my case I changed it to:

body {

min-width: 1439px;

}

i think this way is better

change

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

to

#nav ul {
    float: right; // instead of margin: 0 0 0 670px;
    margin: 0; //reset ul default properties 
    padding: 0; //reset ul default properties 
}

also change this

#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;
}

to

#nav ul li a {
    display: inline-block;
    padding: 0 20px; // padding only for left and right, just use line-height instead of padding-top and padding-bottom
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    line-height: 40px; // same value as navigation height (#nav) , no need to use padding for top and bottom
}

Need Your Help

Backbone: how to render myView into the DOM

javascript backbone.js backbone-events

I hope this piece of code is enough to understand the problem.

Initialising an array of fixed size in python

python arrays list

I would like to know how i can initialise an array(or list), yet to be populated with values, to have a defined size.