0

I am programming a website where on my home page are several introductions about my pages with a button to the page and a horizontal rule under it. I have them absolute positioned to the desired place, but when I look at my website from another screen (with another resolution) my Horizontal Rule isn't visible anymore, because the div below, with another introduction overlaps it.

I've already tried working with margins around the horizontal rule, but I think because I positioned them as absolute this doesn't work.

I've also tried setting a minimal height on the introduction <div>s, but that didn't work out either.

One of the <div>'s CSS:

.div2{
  position: absolute;
  top: 155%;
  width: 100%;
  min-height: 333px;
}

One of the <div>'s HTML:

      <div class="div2">
          <div class="informatie">
              <h1 class="titel1">Wie ben ik?<h1>
              <p class="tekstinformatie">Klik hieronder voor een profielpagina van mij.</p>
          </div>
          <div class="button1">
              <a class="buttonmainpage" href="profielpagina.html">Profielpagina</a>
          </div>
              <hr class="streep1">
      </div>
sao
  • 1,835
  • 6
  • 21
  • 40
opelxmax
  • 1
  • 2
  • 1
    The answer is, don't position your elements absolutely. Sorry to be the bearer of bad news, but there's a reason it's rarely used. See [Why shouldn't I use position:absolute for positioning everything?](https://stackoverflow.com/q/2275084/215552). – Heretic Monkey Nov 11 '19 at 19:44
  • If you really need to use `position: absolute;`, then you're gonna have to use @media queries if the elements overlap (unless it is within a container with a relative position). But yeah, absolutely positioned elements are a pain – denisey Nov 11 '19 at 22:22

0 Answers0