I already have mentioned the way to look at it:
– consider how and when the sub-files like header.php, sidebar.php, and footer.php are called for example in index.php
– make kind of a collage so you end up with one full html structure as you would find for example when you view the html in the browser.
this should enable you to see that closing the #main div, within index.php (and within the other main template files, and remove the closing div from footer.php should give you the wanted change of the html, i.e. move #secondary out of #main.
in more details –
rough structure of the important divs, for example of index.php:
index.php before changes:
start of index.php
call get_header()
start of header.php
=== <body>
=== <div id="page" class="hfeed">
=== <div id="main">
end of header.php
<div id="primary"></div><!-- #primary -->
call get_sidebar()
=== <div id="secondary" class="widget-area" role="complementary">
=== </div><!-- #secondary .widget-area -->
end of sidebar.php
call get_footer()
=== </div><!-- #main -->
=== <footer id="colophon" role="contentinfo">
=== </footer><!-- #colophon -->
=== </div><!-- #page -->
=== </body>
end of footer.php
end of index.php
index.php after changes:
start of (edited) index.php
call get_header()
start of header.php
=== <body>
=== <div id="page" class="hfeed">
=== <div id="main">
end of header.php
<div id="primary"></div><!-- #primary -->
<em>=== </div><!-- #main -->[<strong>this line is now added here</strong>]</em>
call get_sidebar()
=== <div id="secondary" class="widget-area" role="complementary">
=== </div><!-- #secondary .widget-area -->
end of sidebar.php
call get_footer()
<em>=== </div><!-- #main -->[<strong>this line is now removed</strong>]</em>
=== <footer id="colophon" role="contentinfo">
=== </footer><!-- #colophon -->
=== </div><!-- #page -->
=== </body>
end of footer.php
end of (edited) index.php
and of course you need to do the same with the other templates.
