display: table Question

**JeremyC** · May 15, 2012 10:07

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?

**Spritanium** · May 15, 2012 11:02

Using HTML tables for layouts is COMPLETELY different from using CSS to render elements similarly to tables, regardless of what some people might tell you.

As long as your HTML is semantic, you can use whatever techniques you want to style it.

**Paul O'B** · May 16, 2012 01:18

As Spritanium said its fine to use the display table properties as they infer no semantics upon the actual mark up. They just style it as you want.

The display:table properties are very useful for certain situations but do bring some of the same problems as tables (cells can't wrap - but that's usually what you want ) but as long as you use them properly they are a great tool for ie8+.

**JeremyC** · May 16, 2012 05:16

Thank you for the replies. I've been playing with them for the last few days and they are definitely limited but your right, if they are used correctly then they can be useful.

User Tag List

Thread: display: table Question

Thread Tools

Display

display: table Question

Bookmarks

Bookmarks

Posting Permissions