My div is going down when rezise - html

Question

i'm starting with responsive design and i'm having the next issue:
when i rezise my div, in a design of two column and the right one is going down.
Ex before rezise:
and after rezise:
I dont jnow why is going down f the design is in %. Maybe somebody can help'me, here the css code that i'm using.
* { margin: 0px; padding: 0px; }
h1 {font: bold 20px verdana, sans-serif; }
h2 {font: bold 14px verdana, sans-serif; }
header, section, footer, aside, nav, article, figure, figcaption, hgroup { display: block; }
body { width: 100%; text-align: center; }
#envoltura { margin: 15px auto; text-align: left; padding: 0px 2% 0px 2%}
#cabecera { background: #FFFBB9; border: 1px solid #999999; padding: 20px; text-align: center; }
#menu { background: #CCCCCC; padding: 5px 15px; text-align: center; }
#menu li { display: inline-block; list-style: none; padding: 5px; font: bold 14px verdana, sans-serif; }
#seccion { float: left; width: 65%; margin: 20px 0px 0px 0px; border: 2px solid #999999; padding: 2%; text-align: center; }
#lateral { float: left; width: 26.4%; margin: 20px 0px 0px 0px; padding: 2%; background: #CCCCCC; border: 2px solid #999999; text-align: center; }
#pie { clear: both; text-align: center; padding: 20px; border-top: 2px solid #999999; }

Answer 1

Because you haven't allowed enough room for the two columns at that window size!
► Declare different layout per media queries:
(method below based on a min and max screen resolution range)
#media only screen and (min-width: 480px) and (max-width: 979px) {
/* Your styles for between these two resolutions here */
}
OR! depending on what you want to do, complete end goal, you may not even need to use media queries
► Define width of each columns in a percentage relevant to either the browser, or a wrapper div.
#wrapper {
position: relative; // the below is relative to this
margin: 0 auto; // center
max-width: 1024px; // max size of container
width: 100%; // 100% between min and max ;)
min-width: 960px; // lowest toggle point
}
.left {
width: 80%; // 80% of above
float:left;
min-width: 500px; // add a min-width to declare stopping point
}
.right {
width: 20%; // 20% of above
float:right;
min-width: 100px; // add a min-width to declare stopping point
}

Answer 2

It is because your divs are equaling more than 100% of your parent try this and edit it as you see fit
If you post your html I can explain it furthur
set your body to an absolute value example body{width:1200px} then set your first media query to #media screen and (max-width: 1199px){body{width: 100%}} This way you know that anything over 1199px the page will break