Added second sidebar, need help with tweaking CSS/style sheet

A stylesheet file doesn’t need “sections” – beyond those that help you stay organised. CSS cascades (hence its name) so the more specific the styling and/or the further down that file a given piece of CSS is, the more likely it will be applied. Very general styling higher up the file is more likely to be over-written.

I have put this in at the end of the stylesheet `
.page-id-21

.sidebar {
width:143px;
float:right;
font-size:12px;
color:#333;
margin: -456px 10px 500px 835px;
font-family:Tahoma,Verdana,sans-serif;

}`
It is not doing anything. Can you see where I’ve gone wrong?

Try:

.page-id-21 .sidebar {
width:143px;
float:right;
font-size:12px;
color:#333;
margin: -456px 10px 500px 835px;
font-family:Tahoma,Verdana,sans-serif;
}

You need to keep the selectors on a single line.

These are what I have tried, placed at the end of my stylesheet. They do absolutely nothing, as if they are being overridden somehow..
As it stands I have 5 pages plus my home page. On the home page the post box is too high, pages 1/2 the sidebar is too low, and pages 3/4/5 are all perfect…

.page-id-21 .sidebar {
width:143px;
float:right;
font-size:12px;
color:#333;
margin: 20px 10px 500px 835px;
font-family:Tahoma,Verdana,sans-serif;

}

.page-id-21 .post {
margin: 50px 10px 0 10px;
padding:0px 0px 0px 0px;
height: 100%;
text-align: justify;
color:#000000;

}

.home blog .sidebar {
width:143px;
float:right;
font-size:12px;
color:#333;
margin: 20px 10px 500px 835px;
font-family:Tahoma,Verdana,sans-serif;

}

I am still needing some help with this, anyone around? I’m so close! lol

to start with, your theme does not have a css class .sidebar; this would explain why your css additions are not showing any effect.

it has css id #sidebar and #leftsidebar

more confusingly, most of your site is in the div #leftsidebar; maybe (correct: more definitely) the div is not closed properly, or this is intended by the original theme (?)

following from this, the positioning of the div #content

/* The Content */
#content {
	float: left;
	width: 690px;
	margin: -416px 0px 20px 145px;
	padding: 0 0 0 0;

	}

with a large negative top margin seems to be dependant on the output of the left sidebar; i.e. the content will shift with any changes to the widgets in the left sidebar.

and the position of the right sidebar depends on the content of the #content div, and will endlessly shift for each page.

suggestion:
there is a (useless) <div> just after the <div id="leftsidebar"> – delete this – this should re-balance the arrangement of the html structure.

(then change these styles to what is shown as follows:
for #content:

/* The Content */
#content {
	float: left;background:#999;
	width: 670px;
	margin: -0px 0px 20px 0px;
	padding: 0 0 0 0;

	}

and for #sidebar:

#sidebar {
width:143px;
float:right;
font-size:12px;
color:#333;
margin: 0px 10px 0px 0px;
font-family:Tahoma,Verdana,sans-serif;

}

if this does not work, you could paste the codes of page.php, sidebar.php, and the other sidebar file (?) into https://wordpress.pastebin.com/ each and post the links to these here.

(you have some large height and margin values in various other styles as well, that might need to get changed later)

Thank you so much for this detailed help post! I was not sure where you meant the extra div was, I saw one in the stylesheet and deleted it but nothing changed, let me know if it is somewhere else.

I made the changes you said to content and sidebar and now everything is on the left, so I’m not sure where to go from here.

I inserted the left sidebar myself, that was where this all began, trying to change a 2 column theme to a 3 column. I was able to create the sidebar but the trouble is the integration.

If you could look at the codes below and give me any advice or corrections I’d really appreciate it.

page.php

sidebar.php

leftsidebar.php

Thanks so much for your help!

change this area of page.php:

<div id="leftsidebar">
<?php include (TEMPLATEPATH . '/leftsidebar.php'); ?>
<div id="content"><a name="content"></a>

into this (by adding a closing </div>):

<div id="leftsidebar">
<?php include (TEMPLATEPATH . '/leftsidebar.php'); ?>
</div>
<div id="content"><a name="content"></a>

(that should be it; as you seem to have made the suggested changes to the styles already).

Ok some of these things worked, and some didn’t, I backed up a few steps and figured a few things out myself. Now I am still hung up but think I’ve isolated at least one problem-

I am seeing that my left sidebar (which IS in the correct position on ALL pages) is showing within the content Div. However the right sidebar (just called sidebar) is only in the main wrapper div. This is the sidebar that is giving me issues with placement- where it is in a different position on different pages. (I had that issue with the content but managed to fix that using the content and page margins, so that is fixed now.)

When I check the page template my left sidebar and the content section are in a div code, the right sidebar is PHP get_ code. I’m thinking either using the different types of code is an issue, or more likely I have something in the wrong place. Whatever the issue it seems to be leaving the sidebar only in the wrapper and not directly within the content.

Any help would be greatly appreciated. The codes should be the same as the links in my last post above.

I’m still needing some help with this if anyone can help! thanks ??

I’m still needing some help with this if anyone can help! thanks ??