0

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:

        .navigation{
        min-width: 100%;
        height: 40px;
        background-image: url(../images/images/banner.png);
        padding-left:10px;
        }

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

        li.logout{
        float:right;
        padding-right: 25px;
        }

2 Answers 2

0

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.

1
  • 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? Apr 8, 2012 at 22:25
0

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:

http://jsfiddle.net/ckaufman/w2KUG/1/

2
  • 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 Apr 8, 2012 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, 2012 at 1:52

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.