Question

1. Open this page : http://jsfiddle.net/dwDZx/6/
2. Resize until red

3. Continue make the browser smaller

   <div id="container">
   <div id="div1"><div class="content">one</div></div>
   <div id="div2"><div class="content">two</div></div>
   

   ​

Why does div2 jump down a row instead of resizing? How can I solve this?

Answer 1

You are adding margins for the smaller screen size. Set the margins to a percentage and subtract the percentage of the width for the smaller screen size.

So do not set a margin in pixels. but in percentages.