CODEWITHSUNDEEP
javascriptjqueryhtmlcss
User325313
User325313

Reputation: 79

Jquery or CSS: Set static, unchangeable height for div?

So I'm using Adsense responsive banner and I'm having one problem. My css is set to keep the maximum height of the outer div to 160px; and is using display:inline-block;, it's a pretty simple code:

<div style="display:inline-block; height:160px; width:100%">
  <div>ADSENSE RESPONSIVE (Comes as inline-block)</div>
</div>

The problem is that the banner is expanding the outer div's height and that should not happen. Is there any approach using jquery or css that I could use to set that height static and unchangeable, no matter what's inside and without using css overflow?

EDIT Here's what's happening: enter image description here

FULL CODE

jQuery + HTML:

    <div id="adsenselisting">
    <div id="adsenselistingadvert">



    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Responsive Adsense In Listing -->
    <ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
    data-ad-slot="6429507759"
    data-ad-format="auto"></ins>
    <script>
    jQuery(document).ready(function($){(adsbygoogle = window.adsbygoogle || []).push({})});
    </script>



    </div>
    </div>

CSS

/* FLUID HEIGHT LAYOUT FOR ADSENSE */
#adsenselistingadvert { margin-left:auto; margin-right:auto; max-height:100%;  border:2px solid blue;   }

#adsenselisting {  display: inline-block; width:100%; max-width:100%;  padding-top: 12px; padding-bottom: 12px;   border:2px solid red; }




    @media only screen and (min-width : 1px) {
    #adsenselisting, #adsenselistingadvert { height:100px }
    }
    @media only screen and (min-width : 320px) {
    #adsenselisting, #adsenselistingadvert { height:130px }
    }
    @media only screen and (min-width : 480px) {
    #adsenselisting, #adsenselistingadvert {  height:130px }
    }

    @media only screen and (min-width : 640px) {
    #adsenselisting, #adsenselistingadvert {  height:160px }
    }
    @media only screen and (min-width : 720px) {
    #adsenselisting, #adsenselistingadvert {  height:200px}
    }
    @media only screen and (min-width : 960px) {
    #adsenselisting, #adsenselistingadvert {  height:200px }
    }

Everything works just fine, I just want the height not be expandable.

Upvotes: 0

Views: 1277

Answers (1)

Mihai T
Mihai T

Reputation: 17697

if you don't want to use overflow, set a fixed height on parent, and on child set max-height:100% which will keep the height of the banner at maximum th height of it's parent. see snippet below

i also added a height of 300px on the banner for example purposes. so you can see that it doesn't go out of the div

.fixedheight {
  border:2px solid red;
   box-sizing:border-box;

}

.fixedheight >div { 
height:300px;
border:2px solid blue; 
max-height:100%;
display:inline-block;
 box-sizing:border-box;
}
<div class="fixedheight" style="display:inline-block; height:160px; width:100%">
  <div>ADSENSE RESPONSIVE (Comes as inline-block)</div>
</div>

Upvotes: 1

Related Questions