Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Question Sidebar Floating help

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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!
    Last edited by abduraooft; 08-18-2010 at 06:42 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    dpDesignz (08-19-2010)

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Thanks for that. Will try it out

  • #4
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Do I need to set the #main_content to float?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by dpDesignz View Post
    Do I need to set the #main_content to float?
    No. To make a 2 column layout, apply a float+width to one column(preferably the smaller one) and then set a margin-left/right to the other one.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Ok. Thanks heaps for that

  • #7
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    It didn't work.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have you updated the online version?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Aug 2010
    Location
    Hamilton, New Zealand
    Posts
    88
    Thanks
    5
    Thanked 4 Times in 4 Posts
    No. I have to do it local host. It moves the outline, but the content inside goes all over the place


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •