CODEWITHSUNDEEP
htmlcss
avenas8808
avenas8808

Reputation: 1659

DIV within DIV will not display in browser

I'm using MacOS Sierra 10.12.6 currently, and Firefox 56.

This is my test page code for a HTML page that emulates a printed magazine page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Magazine</title>
    <style>
      .magazine {
        width: 203mm;
        height: 275mm;
        border: 3px solid;
      }
      .advert1 {
        background: yellow;
        width: 179mm;
        height: 249mm;
        padding: 3px solid;
      }
    </style>
  </head>
<body>
  <div class="magazine">
    <H1>Content</h1>
    <div class="advert1">
      <H1>CITY AUTOS</h1>
      <p>1993 MERCEDES-BENZ S500, 4 door saloon, slate grey £POA
      </p>
    </div>
  </div>
</body>
</html>

The div within the div - the .advert1 class does not show up in any browser on Mac, and only .magazine CSS class displays.

There is nothing that hides it within my CSS, so that part can be discounted.

How can I fix this and get the div within the div to display properly using CSS?

Upvotes: 2

Views: 78

Answers (1)

Michael Rodriguez
Michael Rodriguez

Reputation: 2176

The class advert1 is triggering content blockers from showing the div. In my case, if I disable AdBlock Plus, it shows. Alternatively, renaming the div, as in the example below, also works:

.magazine {
  width: 203mm;
  height: 275mm;
  border: 3px solid;
}

.foo {
  background: yellow;
  width: 179mm;
  height: 249mm;
  padding: 3px solid;
}
<div class="magazine">
  <H1>Content</h1>
  <div class="foo">
    <H1>CITY AUTOS</h1>
    <p>1993 MERCEDES-BENZ S500, 4 door saloon, slate grey £POA
    </p>
  </div>
</div>

Upvotes: 1

Related Questions