Sidebar Floating help [Archive]

dpDesignz

08-18-2010, 12:49 AM

I am using a prebuilt template (can't remember where I got it). When I use it in google chrome and Safari it works perfectly fine, but when I look at it in IE my main content drops below the sidebar. In Firefox & Opera it drop down beside my second part of my sidebar. Can anyone tell me whats wrong?

My site is www.kctv.info (masked http://www.dpDesignz.net/KCTV/index.html)

HTML:
<!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=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<title>KCTV - Willow Park Kidz Camp TV</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>
<div id="container">



<a href="index.html">
<object width="785" height="198">
<param name="movie" value="Header.swf">
<embed src="Header.swf" width="785" height="200">
</embed>
</object></a>





<div id="nav">
<ul>
<li class="first"><a href="index.html"><em>H</em>ome</a></li>
<li><a href="#"><em>D</em>VD's</a></li>
<li><a href="#"><em>V</em>ideo's</a></li>
<li><a href="#"><em>K</em>C<em> P</em>HOTOS</a></li>
<li><a href="#"><em>D</em>ownloads</a></li>
</ul>
</div>





<div id="left_sidebar">



<div class="content_header2"></div>
<div class="content_box_right">
<div class="content_box_left">
<div class="content_box">

<div class="thumbnail">
<a href="#"><img src="images/thumb1.jpg" alt="Christmas in July DVD" />
</div>

<h3>
<strong>Last Camps DVD</strong>
<br />
Christmas in July <small><i>(Winter Blues)</i></small>
</h3></a>
<img src="images/ctntbg.png" alt="Christmas in July DVD" />
<span><p></p><h4>Packed with Video Highlights, cabin inspection, the leaders movie + so much more!</h4></span>

<div class="link-more">
<a href="#">...Read More</a>
</div>

</div>
</div>
</div>





<object width="228" height="150">
<param name="movie" value="Team.swf">
<embed src="Team.swf" width="228" height="150">
</embed>
</div>







<div id="main_content">

<div class="content_header">
<h2><span><big><big>BLOG<small><small><small>s</small></small></small>!</big></big></span></h2>
</div>

<div class="content_box_right">
<div class="content_box_left">
<div class="content_box">
<div id="main_content_border">



<div class="topmasters">

<div class="thumbnaila">
<a href="http://www.youtube.com/user/KidzCampVideoTeam" target="_blank"><img src="images/1278489776_youtube.png" alt="Youtube" height="128" width="128" /></a>
</div>

<div class="topmasters_info">

<h3>
<strong>Youtube</strong>, KCTV
</h3>

<big><h4><p>Want to have a sneak preview at what you can get on the DVD? Then head on over to the <a href="http://www.youtube.com/user/KidzCampVideoTeam" target="_blank">KCTV Youtube</a> channel.</p></h4></big>

<p>The KCTV Youtube is run by us. If you have any issues please <a href="mailto:team@kctv.info">contact us</a>.</p>
</div>

<div class="clearthis"> </div>

</div>


<div class="divider"> </div>



<div class="topmasters">

<div class="thumbnaila">
<a href="http://twitter.com/WPKidzCamp" target="_blank"><img src="images/1278488895_twitter.png" alt="Twitter" height="128" width="128" /></a>
</div>

<div class="topmasters_info">

<h3>
<strong>Twitter</strong>, WPKidzCamp
</h3>

<big><h4><p>Want to know what's happening at camp, what's coming up + loads more? Then head on over to the official <a href="http://twitter.com/WPKidzCamp" target="_blank">WPKidzCamp Twitter</a> page.</p></h4></big>

<p>The WPKidzCamp Twitter is run by the leaders at Willow Park Kidz Camp. KCTV takes no responsibility in the content posted there.</p>
</div>

<div class="clearthis"> </div>

</div>


<div class="divider"> </div>



<div class="topmasters">

<div class="thumbnaila">
<a href="http://groups.to/wpkidzcamp/"><img src="images/1278489376_facebook.png" alt="Facebook" height="128" width="128" /></a>
</div>

<div class="topmasters_info">

<h3>
<strong>Facebook</strong>, WPKidzCamp
</h3>

<big><h4><p>Want to know what's happening at camp, what's coming up + loads more? Then head on over to the official <a href="http://groups.to/wpkidzcamp/">WPKidzCamp Facebook</a> page.</p></h4></big>

<p>The
WPKidzCamp Facebook is run by the leaders at Willow Park Kidz Camp.
KCTV takes no responsibility in the content posted there.</p>
</div>

<div class="clearthis"> </div>

</div>



<div class="link-more">
<a href="#"></a>
</div>

<div class="divider"> </div>



<div id="mailinglist_left">
<div id="mailinglist_right">
<div id="mailinglist">
<h2>Join our Mailing List</h2>
<p>Coming Soon</p>

</div>
</div>
</div>





<div id="links">
<div id="links_box">

<h2>Other links</h2>
<table style="text-align: left; width: 90%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td align="center" valign="middle">
<a href="http://wpkidzcamp.webs.com/" target="_blank"><img src="images/WPKIDZCAMP.jpg" alt="WPKidzCamp" /></a><br/><a href="http://wpkidzcamp.webs.com" target="_blank">Official Kidz Camp Website</a>
</td>
<td align="center" valign="middle">
<a href="http://www.willowpk.org.nz/" target="_blank"><img src="images/WillowParkLogo.png" alt="Willow Park" /></a><br/><a href="http://www.willowpk.org.nz" target="_blank">Official Willow Park Website</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>



<div class="clearthis"> </div>

</div>
</div>
</div>
</div>

</div>



<div class="clearthis"> </div>



<div id="page_footer">
<div style="text-align: left;">
© 2010 by <a href="http://www.dpDesignz.net/" target="_top" title="dpDesignz">dpDesignz</a> & Don't Chase me Film. | <a href="/index.html">Home</a> · <a href="#">DVD's</a> · <a href="#">Video's</a> · <a href="#">KC Photos</a> · <a href="#">Downloads</a>
</div>
</div>
</div>
</body>
</html>

CSS:
* {
margin: 0px;
padding: 0px;
}

body {
background: url('images/body_background.gif') #DB0000 repeat-x 0px 0px;
color: #FF006E;
font-family: tahoma, arial, sans-serif;
font-size: 9px;
text-align: center;
}

a {
color: #fff;
text-decoration: none;
}

a:hover {
color: #ea9a2e;
}

span {
display: none;
}

img {
border: none;
}

ul {
list-style-type: none;
}

li {
list-style-type: none;
}

p {
margin: 10px 0px 20px;
text-align: justify;
line-height: 13px;
}

.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}

#container {
text-align: left;
width: 785px;
border-color: #9e9ec3;
margin: 10px auto;
padding: 0px 0px;
border: 3px solid #D2D2D2;
-moz-box-shadow: 0 0 30px #CCC;
-webkit-box-shadow: 0 0 30px #CCC;
box-shadow: 0 0 30px #CCC;
background: #FFF;
background: -webkit-gradient(linear, left top, left 15, from(#4A4848), color-stop(4%, #EEEEEE), to(#4A4848));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 15px);
}

/* Page Header */

#page_header {
width: 785px;
height: 122px;
background: url('images/header_background.gif') repeat-x 0px 0px;
}

#company_name {
padding-left: 204px;
height: 122px;
background: url('images/header_image.png') no-repeat 18px 9px;
}

#company_name h1 {
width: 155px;
height: 32px;
background: url('images/company_name.gif') no-repeat 0px 0px;
}

/* Navbar */

#nav {
text-align: center;
padding-bottom: 2px;
background: url(images/nav_bg.gif) repeat-x;
height: 42px;
font-size: 17px;
}
#nav em {
font-size: 22px;
font-style: normal;
}
#nav ul {
min-width: 780px;
padding: 0;
padding-top: 7px;
}
#nav li {
float: left;
background: 12px 6px url(images/bullet_nav.gif) no-repeat;
padding-left: 50px;
padding-right: 20px;
margin: 0;
}
#nav li.first {
background: none;
padding-left: 60px;
}
#nav a {
font-weight: normal;
color: #9A0000;
text-decoration: none;
}
#nav a:hover {
color: #500000; background: 69px 36px url(images/menu_overn.jpg) bottom center no-repeat;
}

/* Page Body Content */

.content_header {
height: 38px;
background: url('images/main_bg_topright.png') #353434 no-repeat 100% 0px;
overflow: hidden;
}

.content_header h2 {
padding-left: 8px;
height: 38px;
background: url('images/main_bg_topleft.png') no-repeat 0px 0px;
}

.content_header2 {
height: 4px;
background: url('images/main_bg_top.png') #353434 repeat-x 100% 0px;
overflow: hidden;
}

.content_box_right {
margin-bottom: 8px;
background: url('images/main_bg_botright.gif') #353434 no-repeat 100% 100%;
}

.content_box_left{
padding-bottom: 12px;
background: url('images/main_bg_botleft.gif') no-repeat 0px 100%;
}

.content_box {
padding: 5px 13px;
}

.content_box .thumbnail {
float: left;
border: #a1a19e 1px solid;
}

.content_box .thumbnaila {
float: left;
border: 0px;
}

.content_box h3 {
padding-top: 10px;
padding-bottom: 3px;
font-size: 15px;
font-weight: normal;
}

/* Left Sidebar */

#left_sidebar {
padding-left: 2px;
float: left;
color: #FFD800;
}

#left_sidebar .content_header {
width: 228px;
}

#left_sidebar .content_header h2 {
color: #9bb74b;
font-weight: bold;
font-size: 11px;
line-height: 11px;
}

#left_sidebar .content_header h2 span {
display: block;
padding-top: 10px;
}

#left_sidebar .content_box_left {
width: 228px;
}

#left_sidebar .content_box {
background: url('images/left_sidebar_bg.gif') repeat-y 0px 0px;
}

#left_sidebar .content_box h3 {
color: #ea912e;
clear: both;
}

#left_sidebar .link-more {
padding-top: 2px;
text-align: right;
}

#left_sidebar .link-more a {
color: #FFCE39;
font-weight: bold;
}

#left_sidebar .link-more a:hover {
color: #f1af3b;
}

#team {
border-width: 0px 2px;
border-color: #FF9600;
border-style: solid;
}

/* Main Content */

#main_content {
padding-right: 2px;
float: right;
}

#main_content .content_header {
width: 550px;
}

#main_content .content_header h2 {
color: #FFFFFF;
font-size: 12px;
line-height: 12px;
}

#main_content .content_header h2 span {
display: block;
padding-left: 3px;
padding-top: 10px;
}

#main_content .content_box_left {
width: 550px;
}

#main_content .content_box {
padding: 5px 11px 0px 0px;
background: url('images/main_background.gif') no-repeat 100% 0%;
border-width: 0px 2px;
border-color: #FF9600;
border-style: solid;
}

#main_content_border {
padding-left: 10px;
}

#main_content .link-more {
padding-bottom: 7px;
padding-right: 5px;
text-align: right;
line-height: 11px;
}

#main_content .link-more a {
color: #ea9a2e;
font-weight: bold;
}

#main_content .link-more a:hover {
color: #f7ec37;
}

#main_content .divider {
margin: 0px auto 7px 2px;
height: 12px;
background: url('images/main_divider.png') repeat-x 0px 0px;
overflow: hidden;
}

/* Top Masters */

.topmasters {
padding: 6px 0px;
}

.topmasters_info {
float: right;
width: 383px;
}

.topmasters_info h3 {
padding: 2px 0px 2px;
width: 383px;
color: #9bb74b;
}

.topmasters_info p {
margin: 0px;
padding: 10px 5px 10px 0px;
clear: both;
}

/* Mailing List */

#mailinglist_left {
margin-bottom: 5px;
margin-top: 17px;
padding-left: 14px;
background: url('images/loginbox_bgleft.gif') #686765 no-repeat 0px 0px;
float: left;
}

#mailinglist_right {
padding-right: 14px;
background: url('images/loginbox_bgright.gif') no-repeat 100% 0px;
}

#mailinglist {
width: 165px;
height: 99px;
overflow: hidden;
color: #fafafa;
font-size: 9px;
font-weight: bold;
line-height: 9px;
}

#mailinglist a {
text-decoration: underline;
}

#mailinglist a:hover {
color: #f7b637;
}

#mailinglist h2 {
padding-top: 7px;
color: #f7b637;
font-size: 12px;
line-height: 12px;
font-weight: bold;
}

#mailinglist form {
margin: 13px 0px 3px;
}

.mailinglist_formfield {
padding: 0px 3px 2px 2px;
}

.mailinglist_formfield strong {
padding-top: 3px;
float: left;
width: 55px;
display: block;
}

#mailinglist input {
width: 97px;
color: #fff;
padding-top: 2px;
background-color: #4a4948;
border: #8e8c89 1px solid;
font-family: tahoma, arial, sans-serif;
font-size: 9px;
font-weight: bold;
float: right;
}

#mailinglist input.button {
margin-top: 1px;
width: 41px;
height: 14px;
border: none;
text-align: center;
font-weight: normal;
cursor: pointer;
}

#mailinglist_register {
padding-top: 10px;
line-height: 10px;
}

/* Links */

#links {
padding: 8px 10px 5px 17px;
border-left: #62615f 1px solid;
float: right;
}

#links_box {
width: 295px;
font-weight: bold;
}

#links_box a {
color: #f1ab30;
text-decoration: underline;
}

#links_box a:hover {
color: #f7f037;
}

#links_box h2 {
padding-bottom: 9px;
color: #9bb74b;
font-size: 12px;
}

#links_box ul {
padding: 3px 0px 3px;
}

#links_box li {
padding: 3px 0px;
}

/* Page Footer */

#page_footer {
padding: 2px 10px 15px;
color: #adacab;
text-align: center;
}

#page_footer a {
color: #adacab;
text-decoration: underline;
}

#page_footer a:hover {
color: #f7ec37;
}

Thanks in advance