-1

Currently there is nothing wrong with my navbar when viewed correctly. However, me being the OCD guy that I am, I want to make sure I have improper, or abnormal viewing solved as well.

Right now, my navbar consists of a single horizontal line with links separated by a | and some CSS rollover highlighting. Simple setup that gets the job done quite well in my opinion. However, if I zoom in, eventually I will reach a stage where the last link will have no more room, and go down to the next line. Doesn't look good, obviously. I tried putting a max-width:100% on it, but it didn't make a difference.

Relevant code is as follows:

<div class="navbarwrapper">
    <div class="navbar">
        | <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
    </div>
</div>

.navbarwrapper {
    margin-bottom: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    min-width: 800px;
}
.navbar {
    padding: 10px;
}

Like I said, it works fine under normal circumstances, but if you zoom on (or have a low resolution, I'm assuming), the last link flows over to the second line.

3 Answers 3

0

Anchor tags are inline elements. That's what they're supposed to do when they run out of space. If you want them to behave differently you need to set the overflow of the wrapping element for the behaviour you want.

1
  • Damn. Well either way, overflow doesn't work on either element. Shouldn't it be possible to set it so that it extends past the page and allows you to use the horizontal scroll of the browser? At the moment, it's almost as if there is a max-width:100% set on the bar. Nov 25, 2012 at 15:57
-1

try to use <li> in your menu DEMO

-1

overflow: hidden; on the parent div that has to have a fixed width ;)

0

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.