Search code examples
htmlcsspositionscrollbarabsolute

Setting width of absolute div adds horizontal scrollbar


I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/

The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.

anyone any idea how to fix this?


Solution

  • It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example

    body {
        overflow-x: hidden;
    }
    

    JSFiddle Link - your example with this rule

    Edit

    Per discussion, if you simply wish to center an element, apply the following margin rule

    margin : 0 auto;
    

    Updated JSFiddle