Clever Geek Handbook

How to display a DIV with "fixed" and "inline-block" added to its CSS properties

I want to be able to display the DIV in position fixed

and have width

for the content, but every time I add the position: fixed;

div is calculated before display: block;

and the div becomes full.

Html

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

CSS

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


source to share


2 answers


every time I add position: fixed; the div is calculated to display: block; and the div becomes full.

It doesn't display: block

, but position: fixed

makes the div stretch relative to the browser window, and since you have left: 0

and right: 0

, you observe this behavior that the div takes up the entire width of the window.



Depending on your HTML structure, you can use position: absolute

instead, or as pointed out in the comments (thanks @Paulie_D), don't use right: 0

.

+6


source


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

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


source






More articles:


All Articles