Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fixed size DIV exceeding

Tags:

html

css

a content inside div exceeding the fixed size which is decided by css.

<style>
  #fixeddiv {
    position: fixed;
    margin: auto;
    max-height: 300px;
    max-width: 700px;
  }
</style>

<div id="fixeddiv">
  
  <div id="M775568ScriptRootC1273665"></div>
<script src="https://jsc.adskeeper.co.uk/c/r/creditkarma.gq.1253664.js" async>
</script>
</div>

The content inside fixeddiv should be fixed between 300px height and 700px width but it exceeding it and position of the content displaying outside of fixed size.

Edited: Child DIV contain responsive native ad and i am trying to fix the position with parent DIV because i do not make modification inside the ad copy due to advertising network policy.

like image 994
shanmuga pradeep Avatar asked Oct 14 '22 19:10

shanmuga pradeep


People also ask

How do I make a div take up the whole width?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

How do you set fixed width?

To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.


2 Answers

<style>

#fixeddiv { 
    position: fixed;
    margin: auto;
    max-height: 300px;
    max-width: 700px; 
    width:100%;       
    height:100%;
}
  #someotherdiv {
    height:100%;
  }
</style>

<div id="fixeddiv">
<div id="someotherdiv"> contents </div> 
</div>
like image 152
Antoine CHEVALIER Avatar answered Oct 19 '22 14:10

Antoine CHEVALIER


#fixeddiv > div{
   display: block;
   max-width: 100%;
   height: auto;
   vertical-align: top;
}

It really depends on the content inside the fixed div. You can also add overflow:hidden so the child content wont overflow the fixed div boundaries

like image 1
n1kkou Avatar answered Oct 19 '22 12:10

n1kkou