Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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;
}
like image 559
Yax Avatar asked Oct 16 '25 15:10

Yax


1 Answers

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.

like image 166
dfsq Avatar answered Oct 19 '25 04:10

dfsq



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!