3 columns responsive layout issues - responsive-design

Question

Does anybody know why a 3rd child in a 3 column fluid layout would drop down to the next line when there is no media query set at the point it moves?
I get the feeling its something to do with padding but I've tried removing all the padding and it still does it (all be it at a slightly different point).
The site is currently in WP Coming Soon Mode but if someone were able and willing to have a look at it I could probably put it live for a bit. Its driving me crazy!
As I don't have the adequate rating on here yet I'm not permitted to show photos so perhaps a link to them will work?
This is it at 1006px - this is fine.
CLICK HERE TO VIEW - Sample 1
This is how it looks when the size is taken down to 1001px - Not fine!
I expected it to scale and stay at 3 columns until it hits the first media query set at 889px but it doesn't. instead it does this...
CLICK HERE TO VIEW - Sample 2
AND THIS IS IT BEHAVING ITSELF, DOING AS I HAVE SET IT TO AT THE GIVEN 889px QUERY - fine.
... well I'm not permitted to post more than 2 links here so you are going to have to take my word for it here :(
This is the code:
<div id="Thepagewrap">
<div id="Theheader">
<h1>3 Column Responsive Layout</h1>
</div>
<div id="Thecontent">
<h2>1st Content Area</h2>
<p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
</div>
<div id="Themiddle">
<h2>2nd Content Area</h2>
<p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="Thesidebar">
<h2>3rd Content Area</h2>
<p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
</div>
<div id="Thefooter">
<h4>Footer</h4>
<p>Footer text</p>
</div>
</div>
CSS
/* STRUCTURE */
#Thepagewrap {
padding: 5px;
}
#Theheader {
height: 100px;
padding: 0 15px;
}
#Thecontent {
float: left;
padding: 5px 15px;
width: 29%;
}
#Themiddle {
float: left;
margin: 0 6px 6px;
padding: 5px 15px;
width: 30%;
}
#Thesidebar {
float: left;
padding: 5px 15px;
width: 29%;
}
#Thefooter {
clear: both;
padding: 0 15px;
}
#Thepagewrap, #Theheader, #Thecontent, #Themiddle, #Thesidebar, #Thefooter {
border: solid 1px #ccc;
}
#Theheader, #Thecontent, #Themiddle, #Thesidebar {
margin-bottom: 5px;
}
#media screen and (max-width: 889px){
#Thepagewrap {
width: 94%;
}
#Thecontent {
width: 41%;
padding: 1% 4%;
}
#Themiddle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
float: right;
}
#Thesidebar {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
#Theheader, #footer {
padding: 1% 4%;
}
}
#media screen and (max-width: 600px) {
#Thecontent {
width: auto;
float: none;
}
#Themiddle {
width: auto;
float: none;
margin-left: 0px;
}
#Thesidebar {
width: auto;
float: none;
}
}
#media screen and (max-width: 480px) {
#Theheader {
height: auto;
}
h1 {
font-size: 2em;
}
#Thesidebar {
display: none;
}
}

Answer 1

Difficult to be sure without having a live URL to inspect. Often this sort of problem is due to margins and paddings breaking an underlying grid, but in this case the following looks problemaatic to me
#media screen and (max-width: 889px){
...
#Thesidebar {
clear: both; <===== why is this here?
padding: 1% 4%;
width: auto;
float: none;
}
}