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.
<!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>
.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?