0

So I have a horizontal navigation bar styled in CSS. My issue is that there seems to be some bottom padding on the bar, but I do not know where it is coming from.

Additionally, when the nav bar becomes really narrow (resizing the window, mobile, etc), it overflows out of the encircling div. How can I prevent this?

Here is the JSFiddle:

http://jsfiddle.net/m8pWa/

CSS:

 html, body {
    margin: 0;
    padding: 0;
    background-color: #E0F2F7;
}
.header {
    margin: 0 auto;
    text-align: center;
    background-color: #81BEF7;
    padding: 1px;
    color: #FAFAFA;
}
ul {
    margin: 0;
    padding: 0;
}
.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 2em;
}
.nav ul li {
    list-style-type: none;
    display: inline;
    overflow: hidden;
}
.nav li a {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
.nav li a:hover {
    background: white;
    color: #A4A4A4;
}
.nav-wrapper {
    background-color: #58ACFA;
    padding: 1px;
}
.wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
}
/* this centers the internal elements */
 .centered {
    text-align: center;
}
/* gives a main content window to the left that is 70% of the main */
 .content {
    width: 70%;
    float:left;
}
/* makes a sidebar to the right that is 30% of the main and floating right */
 .sidebar {
    width: 30%;
    float:right;
}
.sidebar ul {
    padding: 10px;
}

3 Answers 3

3

Your elements should fill the space naturally, and .nav should not depend on an explicit height. This will allow for things like font-size to change, etc., and prevent the children from overflowing the parent.

Here's the solution: http://jsfiddle.net/m8pWa/3/

Remove the height on .nav.

On .nav li a, change display: block; to display: inline-block;, and remove float: left;.

.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
}

.nav li a {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
3
  • great answer! the nav not depending on a height was enlightening. How would I remove the small border around the buttons now?
    – Aristides
    Nov 9, 2013 at 1:31
  • Thanks for the feedback @Aristides. Checking into the border now. Nov 9, 2013 at 1:32
  • 1
    .nav-wrapper { padding: 1px; }... remove that ;) Nov 9, 2013 at 1:34
1

Nothing to do with padding this time. You have your height set at a fix height I changed it to 1.74ems and it was spot on.

.nav {
  margin: 0 auto;
  padding: 0;
  width: 75%;
  height: 1.74em;
 }

For the nav collapsing when the screen size is a set width,

You do not need to worry unless the screen size is 379px in width and to be honest, no screen is that small unless it is a mobile device.

In that case if you will need to support mobile devices and should look into media queries.

JSFIDDLE

2
  • I'll look into media queries for sure, thanks. (I'll accept in 3 mins when SO lets me)
    – Aristides
    Nov 9, 2013 at 1:19
  • They are very nice and easy to use! I am glad I could have helped and best of luck in your design. Here is a good guide on them, css-tricks.com/css-media-queries. Nov 9, 2013 at 1:24
0

i guess the problem came from the height of 1px you added in thenav

    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 2em;
}

i made changed it to 1.8em and it solved it

    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 1.8em;
}

also it depends also on the monitors, they differ in size therefor their display

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.