CSS width 100% no working

Question

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

Can't see any problem. Actually, I couldn't see a scroll bar anyway. — emerson.marini, Jul 18 '13 at 16:30
See this: http://jsfiddle.net/ShNtf/embedded/result/ The problems is just with minimal width on jsfiddle — mishik, Jul 18 '13 at 16:30
does it make sense to add max-width: 100%; to the .nav-contained? — hwsw, Jul 18 '13 at 16:31

score 1 · Answer 1 · answered Jul 18 '13 at 16:38

1

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

answered Jul 18 '13 at 16:38

Makita

1,812
12
15

score 1 · Accepted Answer · answered Jul 18 '13 at 16:38

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/

score 0 · Answer 3 · answered Jul 18 '13 at 16:32

0

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.

answered Jul 18 '13 at 16:32

Ivan Kuckir

2,327
3
27
46

I don't think the issue is the scrolling. It's that the background color doesn't fill the width when there is a horizontal scrollbar ("a space is left in the right side.") The OP may want/need the `min-width`. – showdev Jul 18 '13 at 16:39

CSS width 100% no working

3 Answers3

Linked