Fluid grids and responsive design with wordpress

media.css

@media screen and (max-width: 650px) {
	#container, #aside-container, #blog-title, #access { display: block; float: none; width: auto; margin: 0 3% 3% 3%; }
	body { font-size: 14px; line-height: 16px; }
}

sidebar-child.php

<?php
// create functions to make the opening and closing tag of our container div
function childtheme_abovemainasides() { ?>
	<div id="aside-container">
<?php }

function childtheme_belowmainasides() { ?>
	</div><!-- #aside-container -->
<?php }

// add the action into the extension points
add_action('thematic_abovemainasides', 'childtheme_abovemainasides', 10);
add_action('thematic_belowmainasides', 'childtheme_belowmainasides');
?>

sidebar.php

// Located in sidebar.php 
// Just before the main asides (commonly used as sidebars)
function thematic_abovemainasides() {
    do_action('thematic_abovemainasides');
} // end thematic_abovemainasides

// Located in sidebar.php 
// after the main asides (commonly used as sidebars)
function thematic_belowmainasides() {
    do_action('thematic_belowmainasides');
} // end thematic_belowmainasides

structure.css

/* sets the max width and centers the contents */
#wrapper { max-width: 960px; margin: 0px auto; }

/* our 2 column containers expressed as % of the container width */
#container { float: left; width: 72.5%; margin-right: 2%; }
#aside-container { float: left; width: 24.25%; }