artefact in sidebar if wiget list is longer than main area

Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

because the sidebar code is moved to where it is, the div #main is not stretched together with the sidebar, and leaves the empty bit where the #page background shows.

what was the reason to totally rearrange the sidebar position?

as it is, possibly consider to apply ‘faux columns’ css (use web search if you are not familiar with this method) to the background of #page

I have to admit that I inherited the page maintenance. I have also to admit that I’m not very familar with wordpress – so some questions might be stupid. There’s a section “#sidebar” in the style.css which I can’t find in the origin theme. Did you refer to this one to be adapted?

#sidebar {
	width: 202px;
	float: right;
	padding: 17px;
}

the original theme Twenty Eleven uses #secondary.widget-area;
#sidebar is not used in the original theme, and I have no idea how it is used in your theme.

also, originally the sidebar is inserted after the content, within the #main div, not before.

as you are dealing with an extreme customisation, there is not much anybody here can help you with.

hmm…

I spent some hours and reviewed the code in order to find differences between this version and the original. There are not so many differences. Most of them are related to the change of template version from 1.2. There is no area, where a sidebar is manually generated out of the style.css entry #sidebar. So for me it looks like, that this is a legacy way to create a sidebar.

Can someone help me with the syntax to create this sidebar in the expected way and in which file to place the code? (e.g. function.php?)

Thanx, Hermann

Found a workaround. Setting the variable ‘min-height’ in the array ‘#content’ of style.css to the length of the current sidebar.

#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
/* 121107 hb	workarround for missing length synchronization */
	min-height: 750px;
}

‘Faux columns’ (setting a background image in the colour of the #content area) would have helped as well.