View Full Version : Left Sidebar shows up on right side of page?

08-01-2011, 03:12 AM
Hello all-
This is my first post on Coding Forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out.

I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar.

Here is a link to my problem: http://www.durhamsafekids.org/main.html

Here is my CSS code:

body {
font-size: 62.5%;
background: url(images/top-bdr.jpg) repeat;

p, li {
font: 1.2em/1.8em Sabon, sans-serif;
margin-bottom: 10px;

h1 {
font: 2.0em "Helvetica Neue", sans-serif;
color: white;
height: 0px;

h2 {
font: 1.8em "Helvetica Neue", sans-serif;
color: #99cc33;
margin-bottom: 10px;

h4 {
font :Georgia, "Times New Roman", Times, serif;
color: #0078AA;

h3 {
font :Georgia, "Times New Roman", Times, serif;
color: #333399;

ul {
margin-left: 25px;

img {
border: none;

#page-wrap {
background: white;
width: 960px;
margin: 10px auto;
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;

#main-content {
background: url(/images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;

#header {
background: #ffffff;
text-align: center;

#menu {
background: #ffffff;

#left-sidebar {
width: 185px;
float: left;
padding-left: 15px;
padding-top: 20px;

#footer {
background: #99cc33;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: #006699;
font-size: 12px;

.footer a:link {
/* Applies to unvisited links in class mainNav */
text-decoration: none;
font-weight: bold;
color: #006699;
.footer a:visited {
/* Applies to visited links in class mainNav */
text-decoration: none;
font-weight: bold;
color: #006699;
.footer a:hover {
/* Applies to links under the pointer in class mainNav */
text-decoration: underline;
font-weight: bold;
color: #006699;

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(menu/three_1.gif);}
.preload2 {background: url(menu/three_1a.gif);}

#nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}

And here is my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<meta http-equiv="Content-Type" content="text/html" />

<title>Durham County Safe Kids</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />



<div id="page-wrap">
<div id="inside">

<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
<!-- #EndLibraryItem --></div>

<div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
<li><a href="#nogo4">Car Seats</a></li>
<li><a href="#nogo5">Spot the Tot</a></li>
<li><a href="#nogo6">Hyperthermia</a></li>
<li><a href="#nogo7">Distracted Driving</a></li>

<li><a href="#nogo8">Poison Prevention</a></li>
<li><a href="#nogo9">Wheeled Safety</a></li>
<li><a href="#nogo10">Firearms Safety</a></li>
<li><a href="#nogo11">Water Safety</a></li>
<li><a href="#nogo12">Home Safety</a></li>
<li><a href="#nogo13">Pedestrian Safety</a></li>
<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
<!-- #EndLibraryItem --></div>

<div id="left-sidebar"> Testing</div>

<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
<h2>This website is currently under construction. Please come back soon!</h2>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->

<div id="footer">
<table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
<th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
<th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
<th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
<th scope="col"><span class="footer"><a href="#">Links</a></span></th>
<th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
<th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
</div><!-- #EndLibraryItem --></div>

<div style="clear: both;"></div>




Thanks all!


08-01-2011, 11:25 AM
Check your following code:

#main-content {
background: url(http://www.durhamsafekids.org/images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;

Left padding pushing it to right side.... remove it and check it.

08-01-2011, 03:15 PM
I'm not sure I see what you're talking about. I dont see any element floated left or right. All I see is one element, a div called main-content with a 220 x 100 orange box that naturally sits to the far left per your coding.

If you want a two column layout, there are tons of tutorials found by googling two column layouts.

08-01-2011, 04:59 PM
@ teedoff and vikram. Sorry, I neglected to upload my main.html. I've done so now, and you'll see where the test that should be in the left sidebar is appearing on the right side of the screen. This should make my problem more apparent.

I inserted the text (and eventually pictures, etc) with the following code:

<div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>

08-01-2011, 05:18 PM
Ok seems to be correct now yes? Are you not seeing that text inside the left sidebar?

08-01-2011, 09:15 PM
Wow...thats really odd. No, I don't.


08-02-2011, 04:32 PM
Make sure you're viewing a refreshed page. Hit ctrl+F5 to clear your browser cache.

btw: We're neighbors...lol Im in High Point.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum