Jump to content

Floating Sidebar


Guest rwlsAndy

Recommended Posts

Guest rwlsAndy

I have a problem with my sidebar (www.rwls.com). I am trying to move my homepage sidebar from the right to the left. I thought it would be easy. I just changed the syntax value from "right" to "left". When I viewed my homepage in EI, it looked just fine. However, when you view it in FF or Netscape, the sidebar is positioned in the middle of the page. Please help!here is my CSS code (the code for the homepage is at the bottom of this post:#content_wrapper { margin: 0; padding: 0; border: 0; background-color: #fff; text-align: left; }/*Content section contains the page specific rules for all pages EXCEPT the home page. Home page rules are contained in the #content_main section below. Most changes made to the content rules should also be included in the content_main section as well.*/#content { margin: 0; padding: 0 10px; color: #000; text-align: left; }#content h2 { font-size: 16px; margin: 0; padding: 20px 0 1em 0; color: #000; font-family: Arial, Verdana, sans-serif; } #content h3, h4 { font-size: 1.05em; margin: 0; padding: 1em 0; color: #000; font-family: Arial, Verdana, sans-serif; }#content p { margin: 0 0 1em 0; padding: 0; } #content img { margin: 1em 0; } /*Content_main section contains rules for the home page. All other pages are controlled by the content section above.*/ #content_main { width: 625px; margin: 0; padding: 0 10px; color: #000; text-align: left; }#content_main h2 { font-size: 16px; margin: 0; padding: 20px 0 1em 0; color: #000; font-family: Arial, Verdana, sans-serif; } #content_main h3, h4 { font-size: 1.15em; margin: 1.5em 0 1em 0; padding: 0; color: #000; }#content_main p { margin: 0 0 1em 0; padding: 0; } #content_main img { margin: 1em 0; } /* End content_main section */ #sidebar { float: left; width: 175px; margin: 0 10px 0 0; padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; background: url(../img/sidebar_background.gif) repeat-y; }#sidebar ul { margin-left: 0; padding: 0; font-size: .75em; list-style-type: none; }#sidebar h2 { font-size: 15px; font-family: Arial, Verdana, sans-serif; font-weight: normal; margin: 0 0 1em 0; padding: 0; border:1px solid #000; background: url(../img/nav_background2.gif) repeat-x; color: black; text-align: center; height: 25px; }#sidebar h3 { font-size: .75em; margin: 0 0 1em 0; color: #000; }#sidebar p { font-size: .75em; font-family: Arial, Verdana, sans-serif; color: #000; font-weight: bold; margin: 0 0 .5em 0; } #sidebar img { margin: 1em 0 0 0; }____________________________________________________Here is the code for my homepage:</head><body><?php// Include the banner and nav divs.include ('inc/bannav.inc');?><div id="content_wrapper"><div id="sidebar"><a href="http://www.truckingshow.com/"><img src="img/mats_logo.jpg" alt="Mid America Trucking Show" border="0" /></a><p>March 22-24, 2007<br />Louisville, KY<br /><a href="http://www.truckingshow.com/">www.truckingshow.com</a></p><a href="http://www.truckshow.com/"><img src="img/vegas_2007.jpg" alt="The Truck Show Las Vegas" border="0" /></a><p>June 7-9, 2007<br />Las Vegas, NV<br /><a href="http://www.truckshow.com/">www.truckshow.com</a></p><a href="http://www.gatsonline.com/"><img src="img/gats.gif" alt="The Great American Trucking Show" border="0" /></a><p>August 23-25, 2007<br />Dallas, TX<br /><a href="http://www.gatsonline.com/">www.gatsonline.com</a></p><!-- End sidebar div --></div><div id="content_main"><h2>Onboard Load Scales For Air Suspension Tractors & Trailers</h2><p>Right Weigh, Inc. is a well established, privately owned company that is committed to providing accurate, reliable and easy to use onboard load scales for the trucking industry. Our patented analog gauges will provide you with the information needed to efficiently and legally load without having to waste time and money to find a commercial scale.</p><div class="left_col"><p><a href="products/interior.php" title="View list of interior scales."><img src="img/int/home-int.jpg" alt="Model 510, Interior Scale" border="0" /></a></p><p><a href="products/interior.php" title="View list of interior scales.">Interior Scales</a></p><p> </p><p><img src="img/quote_home-2.gif" alt="An Affordable Solution to Some Expensive Headaches." /></p></div><div class="right_col"><p> </p><p class="arial">Available for both interior and exterior mounting</p><p> </p><p><a href="products/exterior.php" title="View list of exterior scales."><img src="img/ext/intro-ext-lg.jpg" alt="Model 310, Exterior Scale" border="0" /></a></p><p><a href="products/exterior.php" title="View list of exterior scales.">Exterior Scales</a></p></div><!-- End content_main div --></div><?php

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...