CSS - Sidebar Problems :\

Hi all,

At http://www.bartlett-family.net/chrisbartlett/blog2/ I have recently changed the entire layout and replaced it all with new images, BG, etc.

In IE... On the right, the sidebar and BLOG searchform are all a little too far to the right. I've been playing with it all for a while, but can't seem to move it to the left.

I basically just need to shift the entire righthand contents about 10 or 20 px to the left, but I need to avoid that also changing the righthanded content on all the other pages.

Actually, in FF it is correct, except that the BLOG searchform bar needs to com over about 10-20px to the left. Other than that, it's perfect. I need to make IE look like that!

CSS file is at http://www.bartlett-family.net/chrisbartlett/main.css

I'd appreciate any help. Thank you!

Chris

Here's the main site: http: // anomalyrecords . net / index . html
Here's the sto http: // anomalyrecords . net / catalog

I am using a Zencart embedded template to wrap the main site design around Zencart.. This is working perfectly with a small remaining issue..

I am trying to synchronize the content placement of the sidebar items between Zen Cart and the rest of the site pages.. There is an ever so slight "shift" of the sidebar elements when you toggle bewteen the site pages and the store.. I've done a lot of tweaking and I'm fairly close, but I am at a COMPLETE loss how to put this to bed once and for all.

I am hoping one of the CSS gurus here will see what I am clearly missing and guide me back to the light..

Hello, this is my first time posting here.

I am having a problem with a CSS sidebar. You can view the page at this URL: http://approg.msu.edu/david/ccsac/index2.htm.

For the life of me, I cannot get the sidebar to automatically extend to the length of the page. Obviously, it's not much of an issue at the URL I listed, but it makes a bigger difference when there is a lot of content on the page.

I'm sure the solution is simple, I just need to be pointed in the right direction.

Thanks.

I'm a bit of a CSS newbie but I try.

How do you get the sidebars' height to synchronize with the height of your content? I tried height=100% but it doesn't seem to work. If I put a lot of text in my content, it stretches down but the sidebars remain the same height, making the layout looking ugly. I don't want to have to press enter in my sidebars to match the content's height all the time! Here's my code:


<style type="text/css">
#container {
width: 100%;
border: 1px solid gray;
margin: 0px auto;
}

#banner {
padding: 0px;
background-color: #CDC8F1;
}

#content {
padding: 5px;
background-color: #FFFFFF;
}

#sidebar-a {
float: left;
margin: 0;
padding: 0px;
background-color: rgb(235, 235, 235);
height: 100%;
}

#sidebar-b {
float: right;
margin: 0;
padding: 0px;
background-color: rgb(235, 235, 235);
height: 100%;
}

#footer {
clear: both;
padding: 5px;

background-color: rgb(213, 219, 225);
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

hello everyone,

I've been reading this forum for ages, but I thought i'd finally post. I have a problem with my site forexpm.com

The ads are supposed to be on the right hand side, but some people say that in firefox they are in the middle, covering the text.

I know it's something to do with css, but I can't work out what it is.

Can anyone please help?

Thanks muchly.

Can someone help me with stopping the sidebar from overlapping the footer on jussbuss.tv singles category section, please help

I've been trying various fixes with my template, so that the grey background color in the sidebar, extends beyond the content to the bottom of the page.

Alas... nothing is working.

Here's my code:

Code:

#l_sidebar { color: #cccccc; background-color: #3a3a3a; width: 160px; float: left; float: left; margin-top: 0; margin-bottom: 20px; padding: 0 15px 15px 15px; }
#l_sidebar p{
        margin: 0px;
	line-height: 16px;
        padding: 0px 0px 5px 0px;
	}
#l_sidebar h2 {
	color: #ffbfea;
	font-size: 18px;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	list-style: none;
	padding: 10px 0px 10px 0px;
        margin: 0px;
	}


#l_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
#l_sidebar li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#l_sidebar ul li {
	list-style: none;
	margin: 0px;
	padding: 6px 0px 5px 0px;
	}
	
#l_sidebar ul li a {
	color: #c04080;
	text-decoration: none;
	}

#l_sidebar ul li a:hover {
	color: #c04080;
	text-decoration: underline;
	}


#r_sidebar { color: #c04080; background-color: #3a3a3a; width: 160px; float: right; position:relative; margin-top: 0; margin-bottom: 20px; padding: 0 15px 15px 15px; }
#r_sidebar p{
        margin: 0px;
	line-height: 16px;
        padding: 5px 0px 10px 0px;
	}
#r_sidebar h2 {
	color: #ffbfea;
	font-size: 18px;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	list-style: none;
	padding: 10px 0px 10px 0px;
        margin: 0px;
	}

#r_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
#r_sidebar li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#r_sidebar ul li {
	list-style: none;
	margin: 0px;
	padding: 6px 0px 5px 0px;
	}
#r_sidebar ul li a {
	color: #c04080;
	text-decoration: none;
	}

#r_sidebar ul li a:hover {
	color: #c04080;
	text-decoration: underline;
	}

Hi,

I have a sidebar that's getting a little cramped and I would like to space them out by about 5-10px.

Am using wordpress widgets for most of them so am unsure about where to find them in the code..

www.leehughes.co.uk

#content #sidebar {
float: right;
width: 25%;
}
#content #sidebar p {
font-size: 15px; /* dontate button) */
line-height: 22px;
color: #FFFFFF;
}
#content #sidebar p a {

color: #FFFFFF; /* dontate button) */
text-decoration: none;
}
#content #sidebar p a:link {
color: #FFFFFF;
text-decoration: none;
}
#content #sidebar p a:hover {
color: #003366;
text-decoration: none;
}
#content #sidebar h2 {

color: #FFFFFF; /* categories button) */
font-size: 15px;
}
#content #sidebar h3 {
font-size: 15px;
color: #FFFFFF;
}
#content #sidebar h3 a {

color: #FFFFFF;
font-size: 17px;
text-decoration: none;
}
#content #sidebar h3 a:hover {
color: #003366;
text-decoration: none;
}
#content #sidebar h2 a {
color: #FFFFFF;
font-size: 15px; /* Subscribe button) */
text-decoration: none;
}
#content #sidebar h2 a:hover {
color: #003366;
font-size: 15px;
text-decoration: none;
}
#content #sidebar li {
color: #0000FF; /* Bullet point of posts button) */
line-height: 20px;
}
#content #sidebar li a {
color: #FFFFFF; /* posts button) */
font-size: 15px;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#content #sidebar li a:link {
font-size: 15px;
color: #FFFFFF; /* seconds posts button) */
text-decoration: none;
}
#content #sidebar li a:hover {
color: #003366;
text-decoration: underline;
}
#content #sidebar a {
color: #000000;
}

***RESOLVED: Had to switch to relative positioning***

Okay. I'm sure this is extremely simple, but I can't seem to get this to work for some reason.

I'm basically trying to put a right sidebar in, but it keeps to the left.

Concept:
http://i472.photobucket.com/albums/rr82/rhoover84/concept.jpg

Reality:
http://i472.photobucket.com/albums/rr82/rhoover84/reality.jpg

Here's my css:
Code:

body {
	background-color: #5D5D5D;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

/* Layout Specs */

#container {
	width: 950px;
	margin: 0 auto;
	text-align: left;
}
h1, h2, h3, p {
	margin: 10px 255px 10px 15px;
}
div.content {
	position: absolute;
	background-color: #FFFFFF;
	color: #504E52;
	width: 950px;
	margin: 0px 255px 0px 0px;
	z-index: 1;
}
div.header {
	background-image: url('images/header.png');
	background-position: top;
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 950px;
	height: 200px;
	z-index: 2;
}
div.rtcol {
	position: absolute;
	float: right;
	width: 240px;
	background-color: #E7EEF9;
	color: #504E52;
	border-left: 2px solid 7BD5EA;
	z-index: 2;
}
p.rtcol {
	margin: 0px;
	padding: 0px;
}

/* Text: Headings, etc. */

h1, h2, h3 {
	text-transform: uppercase;
	color: #6083BB;
}
h1.rtcol, h2.rtcol, h3.rtcol {
	color: #E36A07;
}

And finally, the HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="container">
	<img src="images/logopng.png" float="left">
	<div class="header">&nbsp;</div>
	<div class="content">
		<h2>Test Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum mattis nisi id convallis. Nullam aliquam pellentesque lectus, eu hendrerit lectus dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Aliquam scelerisque, metus in euismod lacinia, augue tellus tempus urna, lacinia vulputate lectus quam nec ipsum. Integer iaculis nulla eu turpis fermentum quis dapibus enim consectetur.</p>
		<p>Nunc pulvinar cursus dolor id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet ornare lacinia. Integer sed ante leo, eu dictum enim. Ut risus purus, convallis eu rhoncus at, ultricies ut diam. Ut vel mi ut nibh tincidunt pretium sit amet quis urna. Donec sed auctor eros. Vestibulum nec odio ante.</p>
	</div>
	<div class="rtcol">
		<h2 class="rtcol">Computer Training Courses</h2>
		<p class="rtcol">Tired of condescending looks from your kids?<br>Call us for more info!<br>1-888-QIK-STOP<br>(440) 392-2700</p>
	</div>
</div>	
</body>
</html>

Any suggestions are welcome, so thanks ahead of time!!

Hello,

I'm developing an intranet forum system with a design similar to Google Groups i.e. a sidebar with links to each message in the current thread, and a main content area to display the actual messages. Each area, i.e. the sidebar and the main content area, is a DIV. I have set the sidebar to width:25% and the main area left:25%, width:75%.

My problem comes when I want each area to scroll (the main area vertically, and the sidebar horizontally). My plan is to use overflow:auto; this works fine with the main content area, but with the sidebar the text wraps around onto a new line if it overflows the DIV. This appears to be because the text is "hitting" the other DIV, i.e. the main content area, forcing it onto a new line.

So can I do this using DIVs or do I have to resort to frames (I hope not, frames are SO messy and long-winded compared to DIVs....)

Thanks,
Nick

Greetings!
This is my first time with using css and I'm going out of my mind trying to fix a floating sidebar.

As you can see from the included jpeg, I want the sidebar and main content areas to float flush with the navigation bar. But for some reason, my right sidebar keeps getting pushed down.

Any thoughts would be appreciated.

Thanks!

Devon

picture of what it should look like:themorphememan.com/personalstuff/website-design.jpg

code:themorphememan.com/personalstuff/index.html

Hi all, noob here. I am trying something pretty simple but just cant get it to work. For my site, I have a main content area and two right sidebars. I am trying to decrease the width of the the content area and widen the sidebars to fill the extra space created, say 50px. I have come unstuck trying to get it done though.

Below is the relevant part of the css:

Code:

/* CONTENT layout */

#content {
  float: left;
  width: 100%;
  padding-bottom: 2em;
}

.sidebar-double #content, .sidebar-left #content {
  margin-left: -221px;
}

.sidebar-double #content, .sidebar-right #content {
  margin-right: -271px;
}

.sidebar-right-double #content {
  margin-right: -448px;
}

/* Add blanks left and right for the sidebars to fill */

.sidebar-double #squeeze, .sidebar-left #squeeze {
  margin-left: 221px;
}

.sidebar-double #squeeze, .sidebar-right #squeeze {
  margin-right: 271px;
}

.sidebar-right-double #squeeze {
  margin-right: 448px;
}

/* Add whitespace to content area */

#squeeze {
  padding: 1em 0 1.5em;
  overflow: hidden;
}

.sidebar-double #squeeze, .sidebar-left #squeeze {
  padding-left: 2em;
}

.rightbar #squeeze {
  padding-right: 2em;
}

/* SIDEBAR layout */

#sidebar-wrapper .sidebar {
  float: left;
  z-index: 2;
  position: relative;
}

#sidebar-left {
  width: 221px;
}

#sidebar-right-sec {
  width: 200px;
  padding: 1.2em 0;
  
  
}

#sidebar-right {
  width: 248px;
  padding: 1.2em 0;
  
  
}

.rightbar .top-corners {
  right: -8px;
  top: -3px;
  padding-right: 8px;
  position: relative;
  min-height: 12px;
}

.rightbar .bottom-corners {
  right: 0;
  bottom: -4px;
  position: relative;
  min-height: 7px;
}

I have tried changing the content or 'squeeze' margins as its called and then just widening the sidebars but it just doesnt work. If anyone can help it would be great, thanks!

I need to center the contents of two divs in one of my sidebars. The page can be seen he http://dev.asbco.com

I need to center the free quote image and also the tabbed section beneath it.

Any help is greatly appreciated as I'm trying to launch this site by the end of the week.

Thanks!

This is a first I've seen my problem and I'm hoping it's something silly stupid.

check out the site, code is listed below as well: http://bigoak.kjellandrew.com

Ultimately I'm trying to float the sidebar to the left of the main content.

First thing I notice is that the banner image has excess margin that is anywhere in the CSS. I've tried everything to eliminate that spacing and am starting to think it's related to my other problem.

Second is that when I try to float the side bar (float: left on content and float: left on sidebar) it kills the div #body prematurely. You can tell cause the background color disappears and using firebug proves it showing that the body div is shortened. I've tried specifying heights (min height does extend it, but ultimately not a fix). I've made sure all of my divs are closed in proper order. And I've checked for random ", ', }, or / in my CSS and html and it's totally clean. It validates just fine too.

HELP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Big Oak - Home</title>

	<style type="text/css">
		* { margin: 0; padding: 0;}
		a img {
			border: none;
		}
		.clear {
			clear: both;
		}
		body {
			background: url('_img/outside_bg.png') no-repeat top center #59858b;
		}
		#body {
			margin: 0 auto;
			margin-top: 50px;
			background-color: #fff;
			width: 950px;
			height: 100%;
		}
		#header {
			background: url('_img/header_wood.jpg') no-repeat top;
			width: 950px;
			height: 75px;
		}
			#header h1 {
				text-indent: -9000px;
				font-size: 0;
			}
			#header img.logo {
				float: left;
				position: relative;
				top: -50px;
			}
			#header img.banner {
				margin: 0px auto;
			}
			#header ul {
				float: left;
				list-style: none;
				padding-top: 40px;
				width: 480px;
			}
				#header li {
					display: inline;
					margin: 10px;
					font-family: helvetica;
					font-weight: normal;
					font-size: 1em;
				}
				#header li a:link, 
				#header li a:active {
					text-decoration: none;
					color: #231f20;
				}
				
				#header li a:hover,
				#header li a:active {
					border-bottom: 2px solid #444;
				}
		#header form {
			float: left;
			margin: 30px 5px 0 0;
			display: inline;
		}

				.searchbox {
					height: 1.5em;
					font-size: 1em;
					padding: 2px 2px 2px 5px;
					width: 140px;
					vertical-align: middle;
					border: 1px solid #ccc;
				}
				.searchsubmit {
					vertical-align: middle;
				}
		#social_links img {
			float: left;
			padding: 30px 5px 0 0;
		}
		
	#container {
		width: 890px;
		margin: 0px auto;
	}
	#content {
		width: 560px;
		float: left;
	}
		
		#sidebar {
			width: 270px;
			margin-left: 25px;
		}
	</style>

</head>
<body>
	<div id="body">
		<div id="header">
			<h1>Big Oak</h1>
			<a href="/"><img src="_img/bigoak_logo.png" alt="big oak logo" class="logo" height="119" width="142"></a>
	
			<ul class="nav">
				<li><a href="#">about</a></li>
				<li><a href="#">speaking</a></li>
				<li><a href="#">a:life</a></li>
				<li><a href="#">go events</a></li>
				<li><a href="#">contact</a></li>
			</ul> <!-- ends main navigation list -->
			
			<form method="get" action="">
				<p><input type="text" class="searchbox">
				<input type="image" src="_img/go.png" class="searchsubmit"></p>
			</form>
			
			<div id="social_links">
				<a href="#"><img src="_img/facebook.png" alt="facebook"></a>
				<a href="#"><img src="_img/twitter.png" alt="twitter"></a>
				<a href="#"><img src="_img/rss.png" alt="rss"></a>
			</div> <!-- ends social links div -->
						
		</div> <!-- ends header div -->
		<div id="container">
			<img src="_img/header_img.jpg" alt="banner" class="banner" width="890" height="270">
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
			</div> <!-- ends content area -->
			<div id="sidebar">
				<h3>Cool Sidebar</h3>
					<ul>
						<li>item 1</li>
						<li>item 2</li>
					</ul>
			</div><!-- ends sidebar div -->
		</div> <!-- ends container div for main area of content -->
		
		
	</div>
</body>
</html>

I would like to have a sidebar that vertically stretches to the height of its wrapper div. The sidebar contains two divs (a menu and a graphic) one of which is aligned to the top of the sidebar and one of which is aligned to the bottom. Thus when the sidebar stretches vertically, the space in between the menu and the graphic stretches.

I currently have a floated sidebar with a fixed width and relative postion. That sidebar is in a wrapper div that is also relatively positioned. There is a menu and a graphic (#mascot) inside of the sidebar. My current CSS only allows the sidebar to be vertically as big as the two items in it. Here is my CSS:

Code:

#wrapper {
	padding:0px;
	margin:5px auto 10px auto;
	border:solid 1px white;
	border-collapse:collapse;
	width: 800px;
	height:100%;
	position:relative;
}
#sidebar {
	margin:0px;
	padding:0px;
	width:220px;
	float:left;
	background:url(_images/team/bg_nav.jpg);
	position:relative;
}
#sidebar #menu {
	margin:0px;
	padding:0px;
	border:solid 1px #000;
}
#sidebar #mascot {
	margin:0px auto;
	padding:10px;
	text-align:left;
	background:url(_images/team/bg_mascot.jpg);
	font-size:10px;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	text-align:center;
	border:solid 1px #000;
}
#mainContent {
	margin:0 2px 0 222px;
	background:#FFF;
	padding: 10px;
}
#footer {
	margin:0px;
	padding:0px;
	width:100%;
	background:url(_images/team/bg_footer.jpg);
	font-size:10px;
	font-weight:normal;
	color:#FFF;
	text-align:center;

}

I would really appreciate any help as I am relatively new to CSS. If the code is confusing I'd be happy to expound on anything.

Thans in advance,
Brian