Search code examples
htmlcssstylesheet

Text-center jump on scroller appear

I am trying to make the logo text in center. The .main div could be long and can show scroller (Windows) on house hover.

However, the Text Logo jumps / changes its position when mouse hover and the scroller appear. How to prevent that? To test, please shrink the browser height to see scroller in effect.

Code: http://jsfiddle.net/qhoc/tppzm/2/

HTML:

<div class="main">
    <div class="logo">
        Logo Text
    </div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

CSS:

.main {
    position: fixed;
    width: 200px;
    background: gray;
    overflow: hidden;
    top: 0;
    bottom: 0;
}

.main:hover {
    overflow: auto;
}

.logo {
    text-align: center;
}

li {
    line-height: 40px;
}

Requirements:

  • I like to center .logo without changing its position even with scroller.
  • Prefer not to use JS to adjust position in this case and no hardcode position.

UPDATE 1:

There are two alternatives that I don't like so much:

  1. position:absolute will work but also messed up my other stuffs

  2. width:180px on the .logo will fix it but again, it's hard code too although you can argue that 200px was also hardcoded

Solution

  • The .logo is not getting sufficient width to understand its positioning on hover, so to make it realize that it should stay at center, it should inherit the width of its parent.

    For Instance,

    .logo {
    text-align: center;
    width: inherit;
}

    WORKING DEMO

    Hope this helps.

    PS: If you want to change the overflow (Scroll) of .main:hover, you can set it accordingly to your needs by making it visible or hidden on overflow-x or overflow-y