Crap, I am sorry, I just blew through it so fast I didn't notice this one. http://css-tricks.com/28-ids-cannot-start-with-a-number/ I haven't had to think about that for a long time and I usually never ever do it. So I have removed it "#1st" to "first".
Corrected:
// define arrays for the header widgetized areas
function register_header_subsidiary() {
register_sidebar(array(
'name' => '1st Header Aside',
'id' => 'first-header-aside',
'description' => __('The 1st widget area in the header.', 'thematic'),
'before_widget' => thematic_before_widget(),
'after_widget' => thematic_after_widget(),
'before_title' => thematic_before_title(),
'after_title' => thematic_after_title(),
));
register_sidebar(array(
'name' => '2nd Header Aside',
'id' => 'second-header-aside',
'description' => __('The 2nd widget area in the header.', 'thematic'),
'before_widget' => thematic_before_widget(),
'after_widget' => thematic_after_widget(),
'before_title' => thematic_before_title(),
'after_title' => thematic_after_title(),
));
register_sidebar(array(
'name' => '3rd Header Aside',
'id' => 'third-header-aside',
'description' => __('The 3rd widget area in the header.', 'thematic'),
'before_widget' => thematic_before_widget(),
'after_widget' => thematic_after_widget(),
'before_title' => thematic_before_title(),
'after_title' => thematic_after_title(),
));
}
add_action( 'init', 'register_header_subsidiary' );
// add header subsidiary to belowheader hook
function add_header_subsidiary() {
?> <div id="header-subsidiary"> <?php
if (is_active_sidebar('first-header-aside')) {
echo thematic_before_widget_area('first-header-aside');
dynamic_sidebar('first-header-aside');
echo thematic_after_widget_area('first-header-aside');
}
if (is_active_sidebar('second-header-aside')) {
echo thematic_before_widget_area('second-header-aside');
dynamic_sidebar('second-header-aside');
echo thematic_after_widget_area('second-header-aside');
}
if (is_active_sidebar('third-header-aside')) {
echo thematic_before_widget_area('third-header-aside');
dynamic_sidebar('third-header-aside');
echo thematic_after_widget_area('third-header-aside');
}
?> </div> <?php
}
add_action('thematic_belowheader', 'add_header_subsidiary');
Ok, now for the CSS, I would suggest reusing the same style as the footer elements that come with a default thematic layout.
#subsidiary, #header-subsidiary { width:940px; margin:0 auto; overflow:hidden; }
#subsidiary .aside, #header-subsidiary .aside { width:300px; float:left; margin:0 20px 0 0; }
#subsidiary #third, #header-subsidiary #third-header-aside { margin:0; }
That "overflow:hidden" on the #header-subsidiary is what gets that box to clear the others without a fixed height.
There are a few things I would probably change if I had more time, I don't like doubling up ID's like that but for speed sake, it works.
