2

I'm trying to make the following div flexible

div {
min-width: 500px;
max-width: 1000px;
width:100%;
height: 400px;
margin-left:100px
}

If I remove the margin left everything works fine, but with the margin, when I start resizing the browser window, the box goes behind the browser window and only then starts being resized. How do I solve this issue? I tried a wrapper, tried resetting box-sizing, tried with different positionings but nothing seems to work, what am I missing?

Core_dumped
  • 1,571
  • 4
  • 16
  • 34

1 Answers1

1

Try adding width: calc(100vw-100px); or calc(100% - 100px). This sets the width of the div to Veiwport width - Margin

Also remove max-width: 1000px; and min-width: 500px;

div {
 width: calc(100%-100px);
 height: 400px;
 margin-left:100px
}


div {
     width: calc(100%-100px); /*or `width: calc(100vw-100px);`*/
     height: 400px;
     margin-left:100px;
     background-color:pink;
    }
<div></div>
The Pragmatick
  • 5,379
  • 27
  • 44
  • Thanks, Didn't know about this function in css, but vh seems to work fine too. Yet, is there a cleaner way to accomplish this for browsers like IE <=9? And this seems to be an experimental technology right now. – Core_dumped Jan 05 '15 at 10:38