CSS sidebar misalign... HELP!

[Graycode]

Hi, I'm desperately trying to solve this annoying issue! I'm trying to place the side bar just underneath the search bar, but I want it to be resized automatically, as each page has differing content so I cannot explicitly define the height. The CSS that is related is below,. If required, I can paste all CSS.

#sidebar {
	background-color:#CCCCCC;
	position:absolute;
	top:0px;
	right:265px;
	width:15%;
	height:200px; 
}
#content {
	margin: 10px 0px 10px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

The site is at http://roots.sodesigns.co.uk/ and you can see where the sidebar currently sits- on the header!! Additionally, this is created in Wordpress. Your comments and help is much appreciated.

Thanks

[Dandello]

Well, first - validate all your code - at least then you'll know that what you have isn't broken. (I saw lots of

<link href="style.css" rel="stylesheet" type="text/css" />

in the source code.)

Then - you have

#
#sidebar {
#
background-color:#CCCCCC;
#
position:absolute;
#
top:0px;
#
right:265px;
#
width:15%;
#
height:200px;
#
}

That (in theory) puts your box at the top edge and 265px to the right of the left edge of the page. (But where I'm seeing it on http://roots.sodesigns.co.uk/?page_id=6 is close to the bottom of the page so there is something else going on as well.)

[Graycode]

Thanks Dandello. Ok so something else is interfering with my code? I placed my code in a validator and I saw unrelated errors, background colors etc. COULD this cause the sidebar to misalign completely?? I would like the sidebar to sit relatively instead of defining exact positioning but if i do that and float it right, it disappears... Please see my entire code below:

body {
	font: 75%/150% "Trebuchet MS", Tahoma, Arial;
	color: #333333;
	/*background: #FFFFFF url(images/main-bg.gif);*/
        background: #c0c0c0;
	margin: 0px;
	padding: 0px 0px 40px;
}
a {
	color: #CC6600;
	text-decoration: none;
}
a:visited {
	color: #CC6633;
	text-decoration: none;
}
a:hover {
	color: #FF6600;
	text-decoration: underline;
}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	text-align:center;
	font-size:18px;
	color: #333333;
	margin:0px;
	font: Verdana, Arial, sans-serif;
}
h1 a{
	color: #c9eefe;
	text-decoration: none;
}
h1 a:visited{
	color: #c9eefe;
	text-decoration: none;
}
h1 a:hover{
	color: #ffffff;
	text-decoration: none;
}

h2.pageheader {
	font-size:14px;
	font
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

h2.page {
	font-size:14px;
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

h2 {
	font-size:14px;
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}
h2 a, h2 a:visited {
	color: #59770e;
	text-decoration: none;
}
h2 a:hover {
	color: #FF6600;
	text-decoration: none;
}
/*h3 {
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #758d38;
	margin: 10px 0px 5px;
}*/
form {
	margin:0px;
	padding:0px;
}
#page {
	margin: 0px auto;
	width: 847px;
	/*border-bottom: 5px solid #d5e6eb;
	border-left: 5px solid #d5e6eb;
	border-right: 5px solid #d5e6eb;*/
	background: #FFFFFF /*url(images/content-bg.gif) repeat-y*/;
}
#header {
	height:419px;
	background: url(images/header.jpg) no-repeat;
	position: relative;
}
#lightbox {
	color:#FFF;
	height:70px;
	width:480px;
	padding:360px 0px 0px 20px;
	font-size:14px;
	
}
/*		#headerimg {
position: relative;
padding: 30px 0px 0px 40px;
	height: 60px;
}

/*#headerimg .description{
	position: absolute;
	left: 110px;
	bottom: 3px;
	color: #c9eefe;
	font-size: 14px;
}*/
#nav {
	width:847px;
	background:#FFF;
list-style: none;
	margin: 0px;
	position: relative;
	font-size:14px;
	padding-top: 0px;
	margin: 7px 60px 7px 60px;
/*		right: 100px;
	bottom: 100px;*/
}
#nav li {
	float: left;
	margin-left: 5px;
}


#searchbanner{
	float:left;
	background: #8d8d8d;
		width:847px;
		height:30px;
	position: relative;
	
}

#searchform {
	/*background: #000000 url(images/searchform-bg.gif) repeat-x;*/
	position: absolute;
	margin: 4px 0px 0px 630px;
	width: 273px;
	height:40px;
	float:right;
}
#content {
	margin: 10px 0px 10px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

#textcontent {
	margin:0px 20px 0px 20px;
	width: 580px;
	text-align:justify;
}

#sidebar {
	background-color:#CCCCCC;
	float:right;
	position:absolute;
	top:474px;
	right:207px;
	width:15%;
	height:200px;
	float:right;
	
	
	/*top:474px;
	right: 30px;
	
 	margin:0px 177px 30px 27px;
	width: 220px;
	height:auto;
	float:inherit;
	*/
}


#sidebar h3 { /*for text headers in sidebar*/
	
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: # ;
	margin: 10px 0px 5px;
}

/*------------------------------------------ Box 1------------------------------------------*/
#box1{
	width:214px;
	float:left;
}

#img1{
	width:214px;
	height:194px;
	background:url(images/whatsnew_pic.jpg) no-repeat;
}
#txt1{
	padding: 40px 0px 0px 0px;
	width:214px;
	height:174px;
	background: url(images/whatsnew_text.jpg) no-repeat;
	font-size: medium;
}
/* ------------------------------------------END Box 1------------------------------------------*/

/* ------------------------------------------ Box 2 ------------------------------------------*/

#box2{
	width:207px;
	float:left;
}
#img2{
	width:207px;
	height:194px;
	float:left;
	background:url(images/products_pic.jpg) no-repeat;
}
#txt2{
	padding: 40px 0px 0px 0px;
	float:left;
	width:207px;
	height:174px;
	background: url(images/products_text.jpg) no-repeat;
}

/* ------------------------------------------END Box 2------------------------------------------*/

/* ------------------------------------------ Box 3------------------------------------------*/

#box3{
	width:213px;
	float:left;
}
#img3{
	width:213px;
	height:194px;
	float:left;
    background:url(images/salons_pic.jpg) no-repeat;

}
#txt3{
	padding: 40px 0px 0px 0px;
	width:213px;
	height:174px;
	float:left;
	background:url(images/salons_text.jpg) no-repeat;
}

/* ------------------------------------------ END Box 3------------------------------------------*/


/* ------------------------------------------ Box 4------------------------------------------*/

#box4{
	width:213px;
	float:left;
	
}
#img4{
	width:213px;
	height:194px;
	float:left;
    background:url(images/press_pic.jpg) no-repeat;
}

#txt4{
	padding: 40px 0px 0px 0px;
	width:213px;
	height:174px;
	float:left;
	background:url(images/press_text.jpg) no-repeat;
}

/* ------------------------------------------ END Box 4------------------------------------------*/

/* ------------------------------------------ Text settings ------------------------------------------*/

 
#searchform label {
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}

#footer {
	clear: both;
	background: #048DB4 url(images/footer.jpg) no-repeat;
	height:180px;
	
	font-size: 95%;
	line-height: 130%;
}
#footer a, #footer a:visited{
	color: #ffffff;
}
#footer .left-col{
	width: 240px;
	float: left;
	margin-left: 10px;
}
#footer .right-col{
	width: 220px;
	float: right;
	padding-right: 10px;
	padding-left: 10px;

}
#footer h4 {
	font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
	color: #9cdbfb;
	margin: 10px 0px 5px;
}
.recent-comments {
	list-style: none;
	margin: 0px;
	padding: 0px;
	line-height: 110%;
}
.recent-comments li{
	background: url(images/mini-footer-comments.gif) no-repeat;
	padding: 0px 0px 10px 20px;
}
.recent-comments a{
	font-size: 105%;
	line-height: 130%;
	font-weight: bold;
}
.recent-posts {
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-size: 92%;
	line-height: 110%;
}
.recent-posts li{
	background: url(images/mini-footer-post.gif) no-repeat;
	padding: 0px 0px 10px 20px;
}
.recent-posts a{
	font-size: 115%;
	line-height: 130%;
	font-weight: bold;
}
#credits {
	margin: 0px auto;
	width: 847px;
	color: #000000;
	font-size: 85%;
	line-height: 120%;
}
#credits a, #credit a:visited{
	color: #404040;
}
.rss {
	background: url(images/mini-rss.gif) no-repeat left center;
	padding-left: 18px;
	padding-bottom: 2px;
	margin-left: 10px;
}
.left {
	float: left;
}
img.left, a img.left {
	float:left;
	margin: 4px 10px 5px 0px;
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #FFFFFF;
}
a:hover img.left{
	border-color: #FF6600;
	background: #FF6600;
}
.right {
	float: right;
}
img.right, a img.right {
	float:left;
	margin: 4px 10px 5px 0px;
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #FFFFFF;
}
a:hover img.right{
	border-color: #FF6600;
	background: #FF6600;
}
.clear {
	clear:both;
}
hr.clear {
	clear:both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}
img.img_border, a img.img_border {
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #ffffff;
}
a:hover img.img_border{
	border-color: #FF6600;
	background: #FF6600;
}

[Dandello]

Well, 'float:right' and 'position:absolute' are contradictory. Since the position tag is below the float tag, that trumps. Remove the absolute positioning.

So, from what I gather, the sidebar needs to be below the search bar with the content div to the left of it and both should be within the width set by the top graphic.

In that case the problem is actually with the content div - it's set at 846px which is the full width of your working space. It needs be be set at a width small enough to allow the sidebar to sit next to it. An overly large fixed width in the content div will force the sidebar below it. With the margins and padding you may have to play with it.

And you really don't need all those stylesheet calls. Just the one in the head will do it.

[Graycode]

Thanks for that! I have tried what you have suggested and to no avail. I know that I need to modify the content div but increasing it does nothing, but push the page headers across, decreasing it pushes the main page boxes out of kilter...
Not sure how to get around this especially as im working in wordpress so I cannot explicitly define a different content div for the other pages.

Any ideas

[Graycode]

I did it!!

#mainpcontent {
	margin: 10px 0px 0px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

#textcontent {
	margin:0px 20px 20px 20px;
	width: 580px;
	text-align:justify;
}

#sidebar {
	background-color:#CCCCCC;
	margin-left:637px;
	width:210px;
	height:200px;

}

i took the float: right; out of the sidebar and then used a margin to push it into place. Perfect! :) Thanks for the tips and the time looking at my query Dandello, much appreciated! Now I can get on with the rest of the site... :)

G