Add second Sidebar to .css

[triunereni]

Hi,I'm trying to add a second sidebar that I would like to appear on the right to my .css but I have no idea how to do it. The website I am working on is PropertyNow My .css thus far is as follows;

<?phpheader("Content-Type: text/css");include('../../include/common.php');global $config; ?>/* *** This is internal css for Open-Realty 2.2.0 */html, body{  background: #669999;  margin: 0;  padding: 1;  font-size: 0.8em;  font-family: "Lucida Grande", Verdana, sans-serif;  color: #333;  text-align: center;}#layer1{  width: 700px;  background: #CACAAF;	padding: 0px;	text-align: left;	margin: 15px auto;}/*=- Sidebar -=*/#sidebar{	background: #CACAAF;	float: left;	width: 150px;	color: #333;	height: 80%;}#sidebar h2{	color: #CACAAF;	font: 1em "Lucida Grande", Verdana, sans-serif;	letter-spacing: 1px;	padding: 5px;	margin: 0px;	text-transform: uppercase;}#sidebar div{	padding: 2px 5px 2px 5px;}#sidebar div.nav{	padding: 0;}/*=- ......	b//ackground: #000489;........................... -=*/.nav a,.nav a:link,.nav a:visited,.nav a:active{	display: block;	height: 1.3em;	border-top: 1px #FFF solid;;	border-bottom: 1px #A7A772 solid;;	text-decoration: none;	color: #354555;	font: bold 1.1em "Verdana", sans-serif;	padding: 2px;}.nav a:hover{	background: #ffffff;	color: #4B6477;	border-bottom: 1px #92BABA solid;}/*=- ...............#B1CECE...	b//order-bottom: 1px #888 dotted;............... -=*/#sidebar p{	margin: 0;	padding: 3px;}.line{	line-height: 1px;	display: block;	margin: 5px 1px 1px 1px;}/*=- Main -=*/#main{	border-left: 1px #888 solid;	background: #FFFFFF;    float: right;    width: 549px;}.header{background-image: url( "http://www.propertynow.com.au/template/free4_22/images/logowebsite.jpg");	background-repeat: no-repeat;                 background-position:  center;                Height: 120px;             };	/*=- Other -=*/input{	font:1em "Lucida Grande", Verdana, sans-serif;	border: 1px #727664 solid;	background: #F9F9E6;	margin: 1px;	padding:0;}input[type="submit"]{	background: #F3F3F3;}form{	margin: 0;	padding: 0;}p{	padding: 3px 15px;	text-align: justify;	color: #555;    margin: 0;    line-height: 1.5em;}h1{	color:#A77272;	text-decoration: none;	border-bottom: 1px #A77272 solid;	margin: 7px 15px 2px 15px;	padding: 0;	font: 1.2em Trebuchet MS, sans-serif}a,a:link,a:visited,a:active, acronym{	color: #0033FF;	border-bottom: 1px #000 ;	text-decoration: none;}/*=- Footer -=*/.footer{	background: #CACAAF;	border-top: 1px #333 solid;	text-align: center;	margin: 0;	padding: 10px;}

Any help/ideas on this would be much appreciated.Thanks,Coreyna

Edited June 28, 2006 by aspnetguy

[florynth]

What do you whant exactly, a sidebar to scroll just the part where you have the content of the page ?I can put you a scroll where ever you want but I need to know what you want to scroll...

[triunereni]

What do you whant exactly, a sidebar to scroll just the part where you have the content of the page ?I can put you a scroll where ever you want but I need to know what you want to scroll...

<{POST_SNAPBACK}>

[triunereni]

<{POST_SNAPBACK}>

Sorry I wasn't very clear. I just want to learn how to add a right side ( additional menu or column ) in our open realty template here - http://propertynow.com.au the column would be a right side twin of the left side menu column. It would just be the length of the content area same as the left menu.So in the end the template would have a left side, a body then a right side....any help much appreciated.This is the current cascading style sheets code<?phpheader("Content-Type: text/css");include('../../include/common.php');global $config; ?>/* *** This is internal css for Open-Realty 2.2.0 */html, body{ background: #3F547F; margin: 0; padding: 1; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; color: #333; text-align: center;}#layer1{ width: 800px; background: #CCCCCC; padding: 0px; text-align: left; margin: 15px auto;}/*=- Sidebar -=*/#sidebar{ background: #CCCCCC; float: left; width: 120px; color: #333; height: 80%;}#sidebar h2{ color: #CCCCCC; font: 1em "Lucida Grande", Verdana, sans-serif; letter-spacing: 1px; padding: 20px; margin: 0px; text-transform: uppercase;}#sidebar div{ padding: 2px 5px 2px 5px;}#sidebar div.nav{ padding: 0;}/*=- ...... b//ackground: #000489;........................... -=*/.nav a,.nav a:link,.nav a:visited,.nav a:active{ display: block; height: 1.3em; border-top: 1px #FFF solid;; border-bottom: 1px #A7A772 solid;; text-decoration: none; color: #354555; font: bold 1.1em "Verdana", sans-serif; padding: 8px;}.nav a:hover{ background: #ffffff; color: #4B6477; border-bottom: 1px #92BABA solid;}/*=- ...............#B1CECE... b//order-bottom: 1px #888 dotted;............... -=*/#sidebar p{ margin: 0; padding: 3px;}.line{ line-height: 1px; display: block; margin: 5px 1px 1px 1px;}/*=- Main -=*/#main{ border-left: 1px #888 solid; background: #FFFFFF; float: right; width: 678px;}.header{background-image: url( "http://www.propertynow.com.au/template/free4_22/images/logowebsite.jpg"); background-repeat: no-repeat; background-position: center; Height: 120px; }; /*=- Other -=*/input{ font:1em "Lucida Grande", Verdana, sans-serif; border: 1px #727664 solid; background: #F9F9E6; margin: 1px; padding:0;}input[type=submit]{ background: #F3F3F3;}form{ margin: 0; padding: 0;}p{ padding: 3px 15px; text-align: justify; color: #555; margin: 0; line-height: 1.5em;}h1{ color:#A77272; text-decoration: none; border-bottom: 1px #A77272 solid; margin: 7px 15px 2px 15px; padding: 0; font: 1.2em Trebuchet MS, sans-serif}a,a:link,a:visited,a:active, acronym{ color: #0033FF; border-bottom: 1px #000 ; text-decoration: none;}/*=- Footer -=*/.footer{ background: #CACAAF; border-top: 1px #333 solid; text-align: center; margin: 0; padding: 10px;}<!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" xml:lang="en" lang="en" > <head><title>{site_title}</title><!-- CSS --><link rel="stylesheet" type="text/css" href="{template_url}/style.css.php" /><link rel="stylesheet" type="text/css" href="{template_url}/css-styles.php" /><!-- Meta Tags --><meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /><meta name="generator" content="Open-Realty 2.2.X" /><!-- Please Leave This if poss --><meta name="keywords" content="your keywords here" /><meta name="description" content="your description here" /><meta name="author" content="{company_name}" /><meta name="robots" content="all" /><!-- Includes for embedded Open-Realty 2.2.X codes -->{load_css_style}{load_css_editor}{load_js}{license_tag}<!-- by Open Realty UK See http://www.open-realty.co.uk/ for more information. --></head><body> <div id="layer1"> <div id="sidebar"> <div> <br /><br /><br /> </div> <!-- <span class="line"></span> --> <h2>Navigation</h2> <div class="nav"><a href="{url_index}" title="Home Page ">Home Page</a><a href="{page_link_3}" title="">About Us</a><a href="{page_link_2}" title="">Contact Us</a><a href="{url_search}" title="Search Listings">Search Listings</a><a href="{url_search_rental}" title="Rental Search">Search Rentals</a><a href="{url_search_results}" title="View All Listings">View All Listings</a><a href="{baseurl}/index.php?action=search_step_2&pclass[]=1" title="Homes">Homes</a><a href="{baseurl}/index.php?action=search_step_2&pclass[]=3" title="Farms">Farms</a><a href="{baseurl}/index.php?action=search_step_2&pclass[]=4" title="Commercial">Commercial</a><a href="{baseurl}/index.php?action=search_step_2&pclass[]=2" title="Land">Land</a><a href="{url_view_agents}" title="">View Agents</a><a href="{url_view_calculator}" onclick="window.open(this.href,'_blank','location=0,status=0,scrollbars=1,toolbar=0,menubar=0,width=500,height=520');return false" title="Loan Calculators">Loan Calculators</a><a href="{url_view_favorites}" title="View Favorites">View Favorites</a><a href="{url_view_saved_searches}" title="Saved Searches">Saved Searches</a><a href="{url_member_signup}" title="Member Signup">Member Signup</a> </div> </div> <div id="main"> <div class="header"><!-- <h1></h1> -->    </div><!-- content -->{content}<!-- content //--> </div> <br style="clear: both;" /> <div class="footer">© 2006 {company_name} All Rights Reserved.<br />Powered by <a href="http://open-realty.org/">Open-Realty</a> | Designed by <a href="http://www.open-realty.co.uk/" title="Designed by Open Realty UK">Open Realty UK</a> </div> </div></body></html>

[florynth]

What I'll suggest you to do is something like this

#Container{     width:(what you whant);     height:(waht you whant);}#LeftPanel{     width:(what you whant);     height:(what you whant);     float:left;     .....}#CenterPanel{     width:(what you whant);     height:(what you whant);     overflow:auto;}#RightPanel{     width:(what you whant);     height:(what you whant);     float:right;}#BottomPanel{     width:(what you whant);     height:(what you whant);     clear:both;}<div id="Container">    <div id="LeftPanel">    Left Side Content    </div>    <div id="CenterPanel">    Center Content    </div>    <div id="RightPanel">    Right Side Content    </div><div id="BottomPanel"></div></div>

Just be sure that your width and height matchIt should display three colum and end a row in the bottom if you want to put copyright and info at the bottom of your site...