Hello, I have some questions regarding the CSS display:table; property.

I want to make a custom responsive wordpress theme, but I have some questions and and looking for suggestions. The problem that I have and other people as well is with certain wordpress plugins that depend on a fixed width sidebar for advertisements, which responsive layouts struggle with. I have been playing around with different things and wanted your opinion on the following proposed solution. I read a story here on sitepoint that praised it, and I have also read things other places that decry the use of table based layouts as a step backwards.

My idea was to use a simple css table based layout as the overall structure to define sidebars and such and then use a more traditional float based grid system for page content. IE would receive a fixed layout via conditionals.

HTML Code:
<!doctype html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
        <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" media="screen" href="ie.css" /> <![endif]-->
    </head>
    <body>
        <div class="container">
            <div class="wrapper">
                <div class="row">
                    <div class="fluid">
                        <p>Fusce neque leo, bibendum mollis lobortis non, semper at enim. Quisque venenatis laoreet velit, 
                            ac ullamcorper turpis cursus sed. Donec malesuada sem ac augue rhoncus hendrerit non id elit. 
                        </p> 
                    </div>

                    <div class="fixed">
                        <p>sidebar</p>
                    </div>

                </div>
            </div>	
        </div>
    </body>
</html>
Code:
.container {
	max-width: 960px;
	margin: 0 auto;
}
.wrapper{
	width: 100%;
	display: table;
}
.row {
	width: 100%; 
	display: block;
}
.fluid, .fixed {
	display: block;
}
.fixed {
	background-color: gray;
}

@media all and (min-width:768px) { 
	.row{
		display: table-row;
	}
	.fixed {
		display: table-cell;
		width: 300px;
	}
	.fluid {
		display: table-cell;
	}
}
I understand that this creates a dependency on source ordering, and that tables have a bad stigma. However, I can't think of another way to accommodate a mix of fixed and fluid elements. Any thoughts?