CODEWITHSUNDEEP
htmlcss
Aristides
Aristides

Reputation: 3925

CSS Nav Bar Padding and Overflow

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

Upvotes: 0

Views: 32873

Answers (3)

user14541762
user14541762

Reputation:

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

Upvotes: 0

Stuart Kershaw
Stuart Kershaw

Reputation: 17701

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

Upvotes: 3

Josh Powell
Josh Powell

Reputation: 6297

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

Upvotes: 1

Related Questions