WordPress Child Theme – Split Twenty Ten Header into 3 Sections

WordPress version: 3.1.3
Parent theme: TwentyTen 1.2

We’re only splitting the Title section of the header into 3 parts: Logo GIF | Description GIF | Misc GIF. The Logo part is already finished (see: WordPress Child Theme – Add Logo to Twenty Ten Header).

1. Description GIF (middle part): needs to float-left, next to the logo (site-title). Desc GIF also needs to be centered within it’s section. Note use of stylesheet_directory and class=”center”:

HTML (header.php in child theme):

<div id="site-description">
<?php bloginfo( 'description' ); ?>
<img src="<?php echo bloginfo ('stylesheet_directory');?>/images/how-you-see-your-world.gif" alt="2020 Eyes How you see you world" class="center" />
</div>

CSS:

#branding img { /* Remove the top & bottom black border lines from the header image */
border: none;
float: none; /* A setting of “none” allows the img to be centered in the #site-description img.center CSS */
}
#site-description {
border-right: 1px solid black;
clear: right;
float: left;
font-style: italic;
margin: 0;
width: 424px;
}
#site-description img.center { /* This is how the img gets centered: added .center to header.php file */
margin-left: auto; /* Centers the image */
margin-right: auto; /* Centers the image */
}

2. Misc GIF (far-right part): needs to float right. Note use of stylesheet_directory

HTML (header.php in child theme):

<div id="header-rating">
<img src="<?php echo bloginfo ('stylesheet_directory');?>/images/rating-header.gif" alt="Twenty Twenty Eyes 5-Star Rating" />
</div>

CSS:

#header-rating {
clear: right;
float: right;
margin: 0;
width: 260px;
}