Hi all

I have created this very basic fluid webpage layout, which features a header section, navigation, sidebar, content section and footer. I also want to make this one responsive, so it will work everywhere. As it is fluid, not much elements will need changing, only on small screens the sidebar needs to be pushed below the content. I have gotten that to work with a screensize of 320x480 and 360x640px (I checked this with Firefox own developer toolkit). Only when I change at these screen sizes from portrait to landscape mode, that mediaquery doesn't seem to work, as in landscape mode the sidebare isn't pushed below the content. Did I get my breaking points somehow wrong, or didn't I understood correctly how mediaqueries work? Is what I want even possible to do?

My HTML code:

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Title of the document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="page">
	Dit is de wrapper
	<div id="header">Dit is de header</div><!-- einde header -->
	<div id="nav">Dit is het menu</div><!-- einde nav -->
	
			
			<div id="content">	
			<h1>Achieve sentience with Skynet! <a href="">Read more &raquo;</a></h1>
			<p>Dit is de content!</p>
			</div><!-- einde content-->		
			<div id="sidebar">Dit is de sidebar!</div>
	
	<div id="footer">Dit is de footer
	</div><!-- einde footer -->
</div><!-- einde page -->
<!-- einde-->
</body>
</hmtl>
My CSS code:

Code:
/* reset stylesheet door Eric Meyer, maak alle browsers gelijk */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*typography*/

body{
	background-color:#DCDBD9;
	color:#2c2c2c;
	font: normal 100% Arial, Georgia, serif;} /* font size is 16px */


h1{
	font-size: 1.5em; /* 24px delen door 16px */
	font-style: italic;
	font-weight: normal;
}

h1 a{ 
	font: bold 0.458333333333333em Arial, sans-serif; /* font size is 11px delen 24px */
	color:#747474;
	letter-spacing: 0,15em;
	text-transform: uppercase;
	text-decoration: none;
}

/*Layout structure*/
#page{
	background-color:#000000;
	width:90%; /* we gaan uit van een breedte van 1024px */
	margin: 0 auto;
}

#header{
	background:#ddd;
	width:100%;  /*volledige breedte van page benutten */
}
#nav{
	background:#c99;
	width:100%; /* volledige breedte van page benutten */
}
#sidebar{
	background:#c9c;
	width:20%; 
	float:left;
}
#content{
	background:#9c9;
	width: 80%; 
	float: right;
}
#footer{
	background:#cc9;
	clear:both;
	width:100%; /*volledige breedte van page benutten */
}

/* Responsive mediaqueries */

/* Disable iOS/WinMobile font size changes */
@media screen and (max-width: 600px),
screen and (max-device-width: 480px) {
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
}

/* Smartphones (landscape) */
@media only screen and (max-width : 480px) and (orientation : portrait){	

#sidebar{
	background:#c9c;
	width:100%; 
	clear: both;
}

#content{
	background:#9c9;
	width: 100%; 
	clear:both;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width:  :640px) and (orientation : landscape) {	

#sidebar{
	background:#c9c;
	width:100%; 
	clear: both;
}
#content{
	background:#9c9;
	width: 100%; 
	clear:both;
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

#sidebar{
	background:#c9c;
	width:100%; 
	clear: both;
}
#content{
	background:#9c9;
	width: 100%; 
	clear:both;
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

#sidebar{
	background:#c9c;
	width:100%; 
	clear: both;
}
#content{
	background:#9c9;
	width: 100%; 
	clear:both;
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

#sidebar{
	background:#c9c;
	width:100%; 
	clear: both;
}
#content{
	background:#9c9;
	width: 100%; 
	clear:both;
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
Where did I get it wrong with my CSS? I am trying to get this one right and learn from this