Is there a way to modify the container class with css so that spinner looks inside the container (the container has the dynamic height to be more or equal the spinner height)?
.container {
border: 1px solid green;
}
.spinner {
display: flex;
position: absolute;
right: 30%;
border: 1px solid red;
}
.spinner::before {
content: "Why this text is not inside green";
font-size: 24px;
}<div class="container">
<div class="spinner">
</div>
</div>
<div>
Why this text is not below another text?
</div>2
Consider using a grid with the contents super-centered and not needing the absolute positioning. The grid then adjusts to the content size.
.container {
border: 1px solid green;
display: grid;
place-items: center;
}
.spinner {
display: flex;
border: 1px solid red;
}
.spinner::before {
content: "Why this text is not inside green";
font-size: 24px;
}<div class="container">
<div class="spinner">
</div>
</div>
<div>
Why this text is not below another text?
</div>
Your .container should have position: relative so the .spinner will be relative to the .container
.container {
position: relative;
border: 1px solid green;
}
.spinner {
position: relative;
top: 0;
left: 0;
border: 1px solid red;
}
.spinner:before {
position: absolute;
content: "Why this text is not inside green";
font-size: 24px;
left: 80px;
color:#FFBC00;
border: 2px solid blue;
} <div class="container">
container
<div class="spinner">
spinner
</div>
</div>
<div>
Why this text is not below another text?
</div>1
Here’s the description of answer given by – Roko C. Buljan in comments
just update your container class to:
.container {
position: absolute;
border: 1px solid green;
}
The .spinner element is taken out of the normal document flow and positioned absolutely. This is done so that it will be placed at a specific location within its containing element.
is this what are you trying to achieve ?
i changed the positioning: .spinner is now correctly positioned relative to the .container.
and added container Flexibility: The .container can have dynamic height, and the spinner will stay centered.
.container {
border: 1px solid green;
position: relative;
min-height: 100px;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
}
.spinner::before {
content: "Why this text is not inside green";
font-size: 24px;
color: black;
}<div class="container">
<div class="spinner"></div>
</div>
<div>
Why this text is not below another text?
</div>