Sidebar Floating help

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:

Code:

<!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" /> 
<!--[if IE]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" charset="utf-8">
<![endif]--> 
</head> 
<body> 
<div id="container"> 
 
	<!-- Start of Page Header --> 
	
	<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> 
 
	<!-- End of Page Header --> 
 
	<!-- Start of Navbar --> 
 
	<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> 
 
	<!-- End of Navbar --> 
 
	<!-- Start of Left Sidebar --> 
 
	<div id="left_sidebar"> 
 
		<!-- Start of DVD Promo --> 
 
		<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> 
 
		<!-- End of DVD Promo --> 
		
		<!-- Start of Team Info	--> 
		
<object width="228" height="150"> 
	<param name="movie" value="Team.swf"> 
	<embed src="Team.swf" width="228" height="150"> 
	</embed> 
	</div> 
	
	<!-- End of Team Info --> 
	
	<!-- End of Left Sidebar --> 
 
 
	<!-- Start of Main Content --> 
 
	<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"> 
		
<!-- Start of KCTV Youtube --> 
 
			<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">&nbsp;</div> 
 
			</div> 
 
			<!-- End of KCTV Youtube --> 
<div class="divider">&nbsp;</div> 
 
			<!-- Start of WPKidzCamp Twitter --> 
 
			<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">&nbsp;</div> 
 
			</div> 
 
			<!-- End of WPKidzCamp Twitter --> 
<div class="divider">&nbsp;</div> 
 
			<!-- Start of WPKidzCamp Facebook --> 
 
			<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">&nbsp;</div> 
 
			</div> 
 
			<!-- End of WPKidzCamp Facebook --> 
 
			<div class="link-more"> 
			<a href="#"></a> 
			</div> 
 
 
			<div class="divider">&nbsp;</div> 
 
 
			<!-- Start of Mailing List --> 
 
			<div id="mailinglist_left"> 
			<div id="mailinglist_right"> 
			<div id="mailinglist"> 
				<h2>Join our Mailing List</h2> 
			<!-- Join our mailing list to hear about all the stuff that's going on at camp & with the video team! --><p>Coming Soon</p> 
			<!-- <form action="/login">
				<div class="mailinglist_formfield">
				<strong>Email:</strong>
				<input class="required" id="txtbox" name="usr_email" type="text" />
					<div class="clearthis">&nbsp;</div>
				</div>
				<div class="mailinglist_formfield">
				<input type="submit" value="Submit" class="button" />
				</div>
 
				</form> --> 
			</div> 
			</div> 
			</div> 
 
			<!-- End of Mailing List --> 
 
 
			<!-- Start of Links --> 
 
			<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> 
 
			<!-- End of Links --> 
 
 
			<div class="clearthis">&nbsp;</div> 
 
		</div> 
		</div> 
		</div> 
		</div> 
 
	</div> 
 
	<!-- End of Main Content --> 
 
 
	<div class="clearthis">&nbsp;</div> 
 
 
	<!-- Start of Page Footer --> 
 
	<div id="page_footer"> 
	<div style="text-align: left;"> 
	© 2010 by <a href="http://www.dpDesignz.net/" target="_top" title="dpDesignz">dpDesignz</a> &amp; 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:

Code:

* {
	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

abduraooft · 08-18-2010, 06:34 AM

Set a width (and float:left; )to #left_sidebar and an adequate margin-left to #main_content. You don't have to set explicit widths to the inner elements then after.

Refer http://bonrouge.com/2c-hf-fixed.php

PS: Cure the divitis in your markup!