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;
}

dfsq · Accepted Answer · 2014-12-09 13:11:47Z

7

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.

answered Dec 9, 2014 at 13:11

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vucko Over a year ago

@Paulie_D If you remove the rightproprety, the div will still be diplay:block.

Paulie_D Over a year ago

No...it doesn't. It displays as inline-block....at least it does in the fiddle. It won't center...if that's what you mean.

Vucko Over a year ago

Check under the computed styles for the .veil.

Alohci Over a year ago

@Paulie_D - What do you mean by displays as inline-block? That it shrink-wraps, or something else?

Paulie_D Over a year ago

Yes, sorry I deleted the comment but yes it "computes" as block but displays (thus shrink wrapping) as `inline-block"...and that I think was the point.

|

avrahamcool · Accepted Answer · 2014-12-09 13:18:05Z

2

Just add another container. and split the contradiction in CSS between them.

HTML:

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

CSS:

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

answered Dec 9, 2014 at 13:18

avrahamcool

14.1k5 gold badges49 silver badges59 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related