Forums

Techguy172

Hi,

I'm having a problem getting my Sidebar to extend the full length of the page. I don't know how to get it stretching to page length. http://karbondesigns.com/Wordpress The final DIV for the sidebar is in the Footer.php file.

/*
	SIDEBAR
*/
#socialsidebar						{ float: left; width: 280px; border-right: 1px solid #89b1cd; border-bottom: 1px solid #89b1cd; background: #e1ecf2;  }
.widget								{ height: inherit; width: 280px; padding: 0px 0 0; margin: 10px 0 15px 2px;  }
.inside								{ margin: 0 5px 0 0; }
.widget ul li 						{ padding: 7px 5px 0 0; color: #1E5B7E; }
.widget ul li a 					{ display: block; color: #1E5B7E; }
.widget ul li a:hover				{ text-decoration: underline; }
.widget  h4							{ color: #5D5D5D;  margin: 0 0 0 10px; font-size: 1.4em; font-family: Georgia; }
.widget ul li p						{ display: block; margin: 0 0 0 15px; font-size: 1em; }
.thumb								{ width: 62px; }
.flickr-thumb						{ margin: 0 0px 10px 15px; height: 41px; width: 62px; overflow: hidden; float: left;  }
.ad									{ width: 125px; height: 125px; float: left; background: white; text-align: center; margin: 5px 0 0px 10px; border: 1px solid #007987;  }
.ad-right							{ width: 125px; height: 125px; float: right; margin: 5px 5px 0px 0; border: 1px solid #007987; }
.ad h2								{ font-family: Arial; font-weight: normal; }

<div id=\"socialsidebar\">
	
		<div class=\"widget\">
		<div class=\"inside\">
			<h4>Twitter</h4>
			<div id=\"twitter_div\"><ul id=\"twitter_update_list\"><li><p></p></li></ul></div>

	<script type=\"text/javascript\" src=\"http://twitter.com/javascripts/blogger.js\"></script>
	<script type=\"text/javascript\" src=\"http://twitter.com/statuses/user_timeline/joelcummings.json?callback=twitterCallback2&amp;count=2\"></script>

		</div>		
	</div>
	
	<div class=\"widget\">
		<div class=\"inside\">
			<h4>Ads</h4>
			<div class=\"ad\"><img src=\"/images/themeforest.jpg\" alt=\"Theme Forest\"/></div>
			<div class=\"ad-right\"><img src=\"/images/lightcms.jpg\" alt=\"Light CMS\"/></div>
			<div class=\"ad\"><img src=\"/images/Authentic.jpg\" alt=\"Authentic\"/></div>
			<div class=\"ad-right\"><img src=\"/images/PSD.jpg\" alt=\"PSD\"/></div>
		</div>
	</div>

	
	<div class=\"widget\">
		<div class=\"inside\">
			<h4>Track Me!</h4>
			<ul>
			<li><p>Facebook</p></li>
			<li><p><a href=\"www.twitter.com/joelcummings\">Twitter</a></p></li>	
			<li><p>Flickr</p></li>
			<li><p>Pownce</p></li>			
			</ul>
		</div>
	</div>

chazzwick

i made a little example of how to do this a while back http://charles-harvey.co.uk/examples/niceLayout
Heres the code to make it. It involves giving absoluteposition to your sidebar and specifiying a top and bottom value.

HTML

	<div id=\"page-wrap\">
		<div id=\"main\">
			<h2>Quisque praesent</h2>

			<p>Ac eget eget, est feugiat ultricies tempus ultricies Aenean dapibus, eleifend amet facilisis. neque ante. et volutpat. malesuada tortor leo. augue, habitant luctus, enim Pellentesque Nam sit vulputate Aliquam facilisis turpis Ut erat. placerat libero eros quis, Vestibulum metus tincidunt netus tincidunt accumsan amet est.</p>
			<p>Vitae sit mi wisi, vitae, lacus sed, egestas. in egestas elit et Vestibulum orci, faucibus, tortor morbi quam, senectus non fermentum, wisi. eros neque ullamcorper erat turpis eu id cursus erat eu egestas ipsum tempor tristique amet, Donec dui et quam Aenean Mauris magna semper. amet, commodo vitae, ornare rutrum ac Donec sapien pharetra.</p>
			</div>
		<div id=\"sidebar\">
			<h2>Hello</h2>
			<p>Vitae sit mi wisi, vitae, lacus sed, egestas. in egestas elit et Vestibulum orci, faucibus, tortor morbi quam, senectus non fermentum, wisi. eros neque ullamcorper erat turpis eu id cursus erat eu egestas ipsum tempor tristique amet, Donec dui et quam Aenean Mauris magna semper. amet, commodo vitae, ornare rutrum ac Donec sapien pharetra.</p>

		</div>		
		<div id=\"menu\">
			<h1>Hello</h1>
		</div>		
				
		


	</div>

CSS

#page-wrap {width:960px;margin:20px auto; background: #daede9;position:relative;min-height:520px}

#page-wrap div {padding:10px 10px 0}

#main {margin:0 220px 0 10px; position:absolute;top:70px;bottom:10px;background: #bbca45;}

#sidebar {position:absolute;width:180px;right:10px;top:70px;bottom:10px; background: #ae6561;}

#menu {position:absolute;top:10px;height:40px;background:#166aea;right:10px;left:10px}

Techguy172

Thanks a lot! Problem Solved!

treehouse : what would you like to learn today?

Forums

How to Get my Sidebar to extend the full Length