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;
}
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With