Html Question posted in
Some basic documentation can be found here.

Simple html & css – div doesn't cover the inner div

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>
Tags:

5

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    To make the spinning circle appear inside the box, you need to change the appearance of both the box and the circle. This is done by changing the styling of both parts. You want the circle to be placed correctly within the box, which can change in size.

    CSS Changes:

    Container position should be relative: This would allow for the absolute positioning of the spinner to be set relative to this container.

    Position the spinner: Add flexbox properties to center the spinner within the container.

    .container {
  border: 1px solid green;
  position: relative;
  /* Make the container a positioning context */
  display: flex;
  /* Use flexbox for alignment */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  height: 100px;
  /* Set a minimum height or let it be dynamic */
}

.spinner {
  display: flex;
  border: 1px solid red;
  /* Remove absolute positioning */
}

.spinner::before {
  content: "Now this text is inside green";
  font-size: 24px;
}
    <div class="container">
  <div class="spinner">
    <!-- Spinner content (if any) -->
  </div>
</div>
<div>
  This text is below another text
</div>
    Login or Signup to reply.
  5. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search