Layout problem with old IE browsers

HTML & CSS
1

Hi all,

I edited a ready design on my page. It looks fine with Firefox and IE8 but it has problems with the earlier versions of IE. Left part of the page goes to the bottom although the sizes seems fine, left section floated left and right section floated to right. Could anyone help me with this issue?

Page code is


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Wishes Organizasyon - Ankara Dü&#287;ün, Ankara'da Nikah, Kokteyl </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div class="flashmuzik">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="85" height="20" id="flashmuzik" title="&#350;ark&#305;">
    <param name="movie" value="sound.swf" />
 
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="sound.swf" width="85" height="20">
      <!--<![endif]-->
 
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
 
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>
<div id="mainpage">
<div id="">
<div id="logo-wrap">
<div id="logo">
  <img src="images/tepe.jpg" alt="" width="860" height="173" /></div>
 
</div>
 
<!-- start header -->
<div id="header">
	<div id="menu">
		<ul>
			<li class="current_page_item">
				<a id="ilklink" href="http://www.wishesorg.com">ANA SAYFA</a>
					</li>
                    <li>
 
				<a href="organizasyon.php">ORGAN&#304;ZASYON</a>
			</li>
                    <li>
				<a href="nikah.php">N&#304;KAH</a>
			</li>
			<li>
				<a href="kokteyl.php">KOKTEYL</a>
 
			</li>
            <li>
				<a href="dügün.php">DÜ&#286;ÜN</a>
			</li>
            <li>
				<a href="galeri.php">GALER&#304;</a>
			</li>  
             <li>
 
				<a href="hizmetler.php">H&#304;ZMETLER</a>
			</li>
            <li>
				<a href="iletisim.php">&#304;LET&#304;&#350;&#304;M</a>
			</li>
		</ul>
	</div>
</div>
 
<!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
	<!-- start content -->
	<div id="content">
    <h1 class="title">Ankara'da Fark&#305; Ya&#351;amaya Haz&#305;r M&#305;s&#305;n&#305;z?</h1>
		<div id="ortabolum">
		  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="167" class="right" id="FlashID" title="Wishes Organization">
		    <param name="movie" value="resim.swf" />
 
		    <param name="quality" value="high" />
		    <param name="wmode" value="opaque" />
		    <param name="swfversion" value="6.0.65.0" />
		    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
		    <param name="expressinstall" value="Scripts/expressInstall.swf" />
		    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
		    <!--[if !IE]>-->
		    <object type="application/x-shockwave-flash" data="resim.swf" width="250" height="167">
		      <!--<![endif]-->
 
		      <param name="quality" value="high" />
		      <param name="wmode" value="opaque" />
		      <param name="swfversion" value="6.0.65.0" />
		      <param name="expressinstall" value="Scripts/expressInstall.swf" />
		      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
		      <div>
		        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
		        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
 
		        </div>
		      <!--[if !IE]>-->
		      </object>
		    <!--<![endif]-->
		    </object>
		  <br />
		  Yeni ya&#351;am&#305;n&#305;z&#305;n en mutlu ve önemli gününün, ömrünüz boyunca sizin ve misafirlerinizin haf&#305;zalar&#305;ndan silinmeyecek güzel bir an&#305;ya dönü&#351;mesi için hayal etti&#287;iniz bütün ince detaylar&#305; deneyimli ekibimizle ölümsüz k&#305;l&#305;yor, unutulmaz bir &#351;ova dönü&#351;türüyoruz.<br />
<br />
Size sadece bütün gözlerin üzerinizde olaca&#287;&#305; muhte&#351;em bir gecenin tad&#305;n&#305; ç&#305;karmak kal&#305;yor.<br />&nbsp;
 
        </div>
		<div class="post">
			<div class="entry">
				<p><img src="images/yuzuk.jpg" width="100" height="100" alt="Yüzük" class="left" />BUNU B&#304;L&#304;YOR MUYDUNUZ?<br />
			    Dairenin veya halka &#351;eklindeki cisimlerin, ba&#351;lang&#305;ç ve biti&#351; noktalar&#305; olmad&#305;&#287;&#305;ndan milattan önce M&#305;s&#305;r halk&#305; taraf&#305;ndan sonsuzlu&#287;u temsil etti&#287;ine inan&#305;l&#305;yordu. Bu inan&#305;&#351;tan yola ç&#305;kan M&#305;s&#305;rl&#305;lar için evlilik yüzü&#287;ü, evlili&#287;in sonsuza dek sürece&#287;ini simgeliyordu.</p>
			</div></div>
		</div>
	</div>
 
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
		<ul>
			<li>
				<h2>Wishes'tan 10 Tavsiye</h2>
				<ul>
                <li>1- Giyinin ve gülümseyin</li>
 
<li>2- Pratik ve rahat ayakkab&#305;lar giyin</li>
<li>3- Davetlileri tan&#305;&#351;t&#305;r&#305;n</li>
<li>4- Dans dersi al&#305;n</li>
<li>5- Güzel foto&#287;raflar çektirin</li>
<li>6- Zaman&#305; çok iyi kullan&#305;n</li>
<li>7- Davetlilerle sohbet edin</li>
<li>8- Durun ve an&#305; yakalay&#305;n</li>
<li>9- Çok e&#287;lenin</li>
<li>10- Her&#351;eyden önemlisi, klasik bir daveti de&#287;il, tamamen size özel bir organizasyonu Wishes ekibiyle birlikte tasarlay&#305;n.</li>
 
</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
	<div style="clear: both;"></div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
 
<!-- end footer -->
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

And the CSS file is:


body {
	margin: 0px;
	padding: 0;
	background: #242424;
	/*background:url(images/blackback.jpg);*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #BBBBBB;
}
h1, h2, h3 {
	margin: 0;
	font-weight: normal;
}
 
h1 {
	font-size: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	margin-bottom:15px;
	text-align:center;
	color:#DADADA;
}
 
h2 {
	font-size: 23px;
}
 
p, ul, ol {
	margin: 0 0 2em 0;
	text-align: justify;
	line-height: 26px;
}
 
a:link {
	color: #BC884F;
}
 
a:hover, a:active {
	text-decoration: none;
	color: #48ACDE;
}
 
a:visited {
	color: #48ACDE;
}
 
img {
	border: none;
}
 
.left {
	float: left;
	margin-right: 15px;
}
 
.right {
	float: right;
	margin-left: 15px;
}
 
/* Form */
 
form {
	margin: 0;
	padding: 0;
}
 
fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
 
legend {
	display: none;
}
 
input, textarea, select {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
}
.flashmuzik { width:100%; background-color:#000; height:20px; }
#flashmuzik { margin-left:20px; }
/* Header */
 
#header {
	clear: both;
	width: 860px;
	height: 52px;
	margin: 0 auto;
	background: url(images/img02.jpg) no-repeat left top;
}
 
/* Menu */
 
#menu {
	float: left;
	width: 860px;
	height: 54px;
	padding-left: 30px;
	background: url(images/img01.jpg) no-repeat left top;
}
 
#menu ul {
	margin: 0;
	padding: 0px 0 0 0px;
	list-style: none;
	line-height: normal;
}
 
#menu li {
	display: block;
	float: left;
}
 
#menu a {
	display: block;
	float: left;
	margin-right: 3px;
	padding: 10px 20px;
	text-decoration: none;
	font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
 
#menu a:hover { 
	text-decoration: none; 
	color: #BC884F;
}
 
#menu .current_page_item a {
	color: #BC884F;
}
 
/** LOGO */
 
#banner {
	width: 600px;
	height: 150px;
	margin: 5px auto;
	padding: 10px 0 0 0;
	background: #BCE03E url(images/img04.jpg) no-repeat left top;
}
 
#logo {
	width: 860px;
	height: 185px;
	margin: 0 auto;
}
 
#logo h1, #logo h2 {
	float: left;
	margin: 0;
	padding: 0 0 0 20px;
	line-height: normal;
}
 
#logo h1 { 
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:36px;
	font-style: italic;
}
 
#logo h1 a {
	text-decoration: none;
	color: #FFFFFF; 
}
 
#logo h1 a:hover { text-decoration: underline; }
 
#logo h2 {
	padding: 20px 0 0 5px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	color: #48ACDE;
}
 
#logo p a {
	text-decoration: none;
	color: #B6ACA2;
}
 
#logo p a:hover { text-decoration: underline; }
 
 
#wrapper {
	width: 860px;
	margin: 0 auto;
	background: #000000 url(images/img02.jpg) no-repeat left top;
}
 
#wrapper-btm {
	background: url(images/img03.jpg) no-repeat left bottom;
}
/* Page */
 
#page {
	width: 870px;
	margin: 0 auto;
	padding-top: 20px;
}
 
/* Content */
 
#content {
	float: right;
	width: 620px;
	margin-right:5px;
}
 
/* Post */
 
.post {
	padding-top:20px;
	padding-bottom:5px;
	padding-left:15px;
	padding-right:15px;
}
 
.post .title {
	margin-bottom: 20px;
	padding-bottom: 5px;
}
 
.post h1 {
}
 
.post h2 {
	height: 32px;
	padding: 8px 0 0 15px;
	font-size: 18px;
	color: #DADADA;
}
 
.post .entry {
	padding: 0 15px;
}
.post .entry p { line-height:20px; }
 
.post .meta {
	margin-left: 15px;
	margin-right: 15px;
	padding: 15px 0px 10px 0px;
	border-top: 1px dashed #333333;
	font-size: 10px;
}
 
.post .meta p {
	margin: 0;
	line-height: normal;
	color: #999999;
}
 
.post .meta .byline {
	float: left;
}
 
.post .meta .links {
	float: right;
}
 
.post .meta .more {
	padding: 0 20px 0 18px;
	background: url(images/img11.gif) no-repeat left center;
}
 
.post .meta .comments {
	padding-left: 22px;
	background: url(images/img12.gif) no-repeat left center;
}
 
.post .meta b {
	display: none;
}
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 200px;
	padding-left: 20px;
}
 
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#sidebar li {
	margin-bottom: 0px;
	line-height:16px;
}
 
#sidebar li ul {
 
}
 
#sidebar li li {
	margin-bottom: 10px;
}
 
#sidebar h2 {
	margin-bottom: 15px;
	font-size: 16px;
	color: #DADADA;
	background-color:#242424;
	vertical-align:middle;
	text-align:center;
	padding-top:7px;
	padding-bottom:7px;
	margin-top:5px;
}
 
/* Search */
 
#search {
}
 
#search h2 {
	margin-bottom: 20px;
}
 
#s {
	width: 115px;
	margin-right: 5px;
	padding: 3px;
	border: 1px solid #BED99C;
}
 
#x {
	padding: 3px;
	border: none;
	background: #48ACDE;
	text-transform: lowercase;
	font-size: 11px;
	color: #FFFFFF;
}
 
/* Boxes */
 
.box1 {
	padding: 20px;
}
 
.box2 {
	color: #BABABA;
}
 
.box2 h2 {
	margin-bottom: 15px;
	font-size: 16px;
	color: #FFFFFF;
}
 
.box2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {
	color: #EDEDED;
}
 
/* Footer */
#footer-wrap {
	width: 860px;
	height: 64px;
	margin: 0 auto;
}
 
#footer {
	margin: 0 auto;
	height: 64px;
	min-height: 64px;
	padding: 0;
	font-size: 10px;
}
 
html>body #footer {
	height: auto;
}
 
#footer p {
}
 
#legal {
	clear: both;
	padding-top: 10px;
	padding-left: 30px;
	text-align: center;
	color: #999999;
}
 
#legal a {
}
#ortabolum { margin:0px 30px; text-align:justify;}

Regards
telmessos

2

the test web site is http://www.wishesorg.com/test4/index.html please help