How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

Question

I want to be able to display a DIV in a fixed position and have its width fit to content but each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.

HTML:

<div class='veil'></div>

CSS:

.veil{
    display: inline-block;
    position: fixed;
    top: 34%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: lavender;
}

Answer 1

each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.

It's not display: block, it's position: fixed makes div stretch relatively to browser window, and since you have left: 0 and right: 0 you observe this behavior that div takes all window width.

Depending on your HTML structure you can use position: absolute instead or as pointed in comments (thanks @Paulie_D) don't use right: 0.