Take the 2-minute tour ×

I have created a navigation bar and styled it with css so that it will extend across the screen. Everything is fine until I resize the window, and then when I scroll horizontally to the right on pages where the content exceeds window size, the navigation bar has not extended fully.

I want the navigation bar to extend as I scroll to the right, not leave a blank space as it is now. Can I accomplish this with CSS?

Here is the CSS code I am using now:

        min-width: 100%;
        height: 40px;
        background-image: url(../images/images/banner.png);

        .navigation li{
        display: inline-block;
        padding-left: 25px; 
        padding-top: 10px;

        padding-right: 25px;
share|improve this question

2 Answers 2

100% width doesn't take overflow into account, so it's always relative to the actual width of the window. Only tables expand to accommodate overflow, although you can probably use table display styles rather than an actual table.

share|improve this answer
Yes the nav is only as long as the width of the window. Can you show me an example of code that would help relieve this problem? –  Maverick Coder Apr 8 '12 at 22:25
body { display: table; } may work for you. –  Neil Apr 9 '12 at 21:05

I think your problem is that you may be applying the .navigation class to a UL. You should have the navigation class be a container for your UL with links. I made an example of what I think you are looking to do:


share|improve this answer
No I didn't make that error, my nav bar looks just fine when the window is big enough to hold the page's content horizontally, but when resized it only fits the window and doesn't extend when I scroll –  Maverick Coder Apr 8 '12 at 22:21
Take a look at the code in my example. It solves your problem. You don't need to give the nav a width if you have a container wrapping it. It will extend the width of the page unless you specify otherwise. –  ckaufman Apr 9 '12 at 1:52

Your Answer


