Moving Widget Sidebar out of Primary Div

In which theme?

It’s the twentyeleven theme.

Although I have created a custom child theme from it.

by default, the #secondary div is outside of the #primary div, and both are wrapped in the #main div which in turn is wrapped in the #page div;

this might be different due to some edits to your theme;
can you provide a link to your site to illustrate the situation?

have you run the validation check on your site – https://codex.www.ads-software.com/Validating_a_Website ?

Apolagies for the misinformation but you are indeed correct about the nesting.That hasn’t deviated from the main template.

Here is a link to the site:

https://www.braveandboldindustries.com/blog

It isn’t the final design,as I want to get the layout correct first before I finish the styling.

You will also notice that the site has been ajaxed so that the widget area doesn’t refresh when you load a page because I want you to be able to continue listening to the soundcloud links without interuption whilst navigating around the site.This has however broken the nav bar rollover/focus elements which I also need to remedy.

So to summarise I would basically like to move the #secondary Div outside of the #main Div so that I can position the Widget area outside of the main content and have it float alongside and follow the content when scrolling.

Any assistance would be much appreciated.

Does anyone know where I can locate the HTML code which sets the nesting for #primary,#main and #secondary?

there is a limited number of files in the theme – check them all.

you could consider to close the #main for example in index.php before teh call of the sidebar and/or footer (and many of the others like search.php, archive.php, category.php, single.php, page.php, author.php, image.php, …) – and remove the existing closing for #main from the top of footer.php; the closing divs are well documented in the code.

The only reference in the PHP code I can find to #secondary seems to exist in the header.php file,nested in the nav bar Div:

<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
	</header><!-- #branding -->

	<div id="main">

Moving this div doesn’t seem to have any effect however which seems very odd.

the div #secondary is opened in sidebar.php

In sidebar.php I can see the #secondary Div,but cannot see it’s nesting.The code looks as follows:

$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];

if ( 'content' != $current_layout ) :
?>
		<div id="secondary" class="widget-area" role="complementary">
			<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

				<aside id="archives" class="widget">
					<h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
					<ul>
						<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
					</ul>
				</aside>

				<aside id="meta" class="widget">
					<h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
					<ul>
						<?php wp_register(); ?>
						<li><?php wp_loginout(); ?></li>
						<?php wp_meta(); ?>
					</ul>
				</aside>

			<?php endif; // end sidebar widget area ?>
		</div><!-- #secondary .widget-area -->
<?php endif; ?>

As I am not really too hot with PHP I’m not really sure what’s going on here.Using the Developer tools in chrome I can ‘see’ the html which causes the #secondary Div to sit in the #Main Div and move it but I cannot find the source code which drives it.

Please bare in mind I’m a relative novice when it comes to this stuff….eeek.

the nesting is done by the rendering of the site, when ‘WordPress’ ‘assembles’ all the output of the involved files into one html web page;

in your case, for example for the front page, you have to imagine to add the html structure of haeder.php + index.php + sidebar.php + footer.php to see the nesting.

So what would be the correct way to move the #secondary Div?

So what would be the correct way to move the #secondary Div?

you move the closing of the wrapping #main div to before the #secondary div, for example as I already suggested earlier – https://www.ads-software.com/support/topic/moving-widget-sidebar-out-of-primary-div?replies=13#post-5885875

Yes I understand that,but as you can see in the code the wrapping Div for #main is not contained within the header and is being called up somewhere is by the PHP.

As I am not well versed in PHP this is confusing,as if I was simply editing the HTML itself it would be very easy.

Can anyone shed any light on this at all?