CODEWITHSUNDEEP
htmlcss
h2O
h2O

Reputation: 544

CSS width 100% no working

I have a navigation bar that is set to width 100%. It displays perfectly but the problem is that when it is zoomed, a space is left in the right side. You can see the working example at http://jsfiddle.net/ShNtf/ The follwing is my CSS code:-

.nav-container{
    width:100%;
    color:#fff;
    background:#000;
}
.nav-contained{
    min-width:350px;
}
}
body{
    padding:0;
    margin:0;
}

Upvotes: 0

Views: 719

Answers (3)

showdev
showdev

Reputation: 29168

Problem:

When a horizontal scroll-bar is visible, background color doesn't fill browser width.

Solution:

I had success by moving the background-color definition to from .nav-container to .nav-contained.

.nav-container {
    width:100%;
}
.nav-contained {
    min-width:350px;
    background:#000;
    color:#fff;
}

http://jsfiddle.net/ShNtf/7/

Upvotes: 1

Makita
Makita

Reputation: 1812

Assuming you want to keep min-width, add it to the container and it will work:

.nav-container{
  width:100%;
  color:#fff;
  background-color:#000;
  min-width:350px;
}

Upvotes: 1

Ivan Kuckir
Ivan Kuckir

Reputation: 2549

It is because of min-width. When you zoom in, 350px are "multiplied" and if it is more than outer container width, it becomes wider and scrollbar is shown.

Remove that min-width to make words break into multiple lines after zooming.

Upvotes: 0

Related Questions