CODEWITHSUNDEEP
htmlcssflexboxpseudo-element
user8000626
user8000626

Reputation: 305

placing a div after a css ::after

I have a CSS ::after that displays an SVG image.
I would like my container to display after this SVG image.
What is happening, is that the SVG is "not taking any space" so to speak, and the next DIV is being covered by the SVG .

thanks for looking into this.

.overpass-info-container::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 0;
  height: 182px;
  width: 100%;
  background-color: white;
  background: url("../images/curve.svg") bottom center;
  background-size: 100%;
  outline: 1px solid red;
}

/*  finding container  */
section.finding-container {
  top: 180px;
  display: flex;
  position: absolute;
}

.find-agent {
  margin-left: auto;
  display: flex;
  flex-flow: column;
}

.agent-profiles {
  display: flex;
  flex-flow: column;
}
<!-- ***** finding container ***** -->
<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
  </div>
  <div class="agent-profiles">
    <img src="./images/profiles.svg" alt="profiles">
  </div>
</section>

Upvotes: 3

Views: 1120

Answers (2)

Shaul Vainblat
Shaul Vainblat

Reputation: 21

In .overpass-info-container::after

  • Try adding a display: block
  • Try replacing position: absolute with position: relative

Those changes should give the ::after his own space in the HTML.

Upvotes: 2

user8000626
user8000626

Reputation: 305

well, I did something simple, still open to suggestions. I added to each of the children a margin-top attribute, and this took care on things...

section.finding-container {
  top: 180px;
  display: flex;
  position: absolute;
}
.find-agent {
  margin-top: 200px;
  margin-bottom: auto;
  margin-left: 0;
  display: inline-flex;
  flex-flow: column;
}
.agent-profiles {
  margin-top: 200px;
  display: inline-flex;
  flex-flow: column;
}

thanks for everyone who tried to help...

Upvotes: 0

Related Questions