CSS minimal margin

Question

I need to have a margin that is 7% wide, and at least 100px, how would i do this?

I tried

margin:7% 100px;

But it didn't work

Is there something like a min-margin?

Answer 1

Found an answer, this is the code that works:

<script type='text/javascript'>
window.addEventListener('resize', function(event){
if (GetWidth() < 1373) {
    console.log('changed < 1372');
    document.getElementById('main').style.marginLeft = '100px';
}else{
    console.log('changed > 1372');
    document.getElementById('main').style.marginLeft = '7%';
}

}, false);

function GetWidth()
 {
          var width = 0;
          if (self.innerHeight)
          {
                  width = self.innerWidth;
          }
          else if (document.documentElement && document.documentElement.clientHeight)
          {
                  width = document.documentElement.clientWidth;
          }
          else if (document.body)
          {
                  width = document.body.clientWidth;
          }
          return width;
 }


</script>

It checks for every window resize, whenever you resize, it executes the function GetWidth. If the page width is lower than 1372, it changes the css of my div with ID 'main'.

Answer 2

You could assign a margin of 100px, and then override this using javascript (when a certain requirement is met), or you could use media queries

for example when width is >= 500px, change the styles so margin would be 7% instead of 100px