DIV overflows outer DIV when IE window is reduced in size (Restore-Down)

Question

I have following CSS and HTML which works fine to display DIV's Paralleled. But When I reduce the IE window size (restore-down) button control overflows the root DIV. Is there any way to fix it. Basically I want CSS to adjust DIVs with in root div even if user reduce the page window size.

CSS

<style type="text/css">
 #root {
   background-color: #eee;
   width:100%;
 }

#left_side {
  float: left;
  padding-left: 10px;
  width:60%;
}

#right_side {
  float: Left;
  width: 40%;
  padding-right: 10px;
}
</style>

HTML

<div id="root" style="border:#04476F;border-color: #04476F; border-style: solid">      
  <div id="left_side">   Some Text here.     
  </div>       
  <div id="right_side">    
    <input type="submit" value="Submit your Request" />   
  </div>
</div>

Restore Down

Thanks

Please check this SO answer [here](http://stackoverflow.com/a/10269314/374075) — Chris, Dec 03 '14 at 10:15

score 0 · Answer 1 · answered Dec 03 '14 at 10:55

Working jsFiddle

Add div position, and instead of adding the padding to the inner divs, add it to the container.

 #root {
   background-color: #eee;
   width:100%;
    padding:0 10px;
 }

#left_side {
  float: left;
  width:60%;
  position:relative;
}

#right_side {
  float: left;
  width: 40%;
  position:relative;
}

PS: also, on the right_side you wrote position: Left; with capital L.

DIV overflows outer DIV when IE window is reduced in size (Restore-Down)

1 Answers1