Three column layout with CSS display table, with first row having multiple rows?

Question

I am working on a new website which:

Has 3 columns - Each Column being a cell
First column has 3 rows (Logo, Nav, icons) - Has a Div with display: table which wraps around 3 divs with display:table-row.
Other two columns only have 1 row. With the middle column being the content area.

However since this is my first time using display:table, I am running into some things that aren't so clear to me. I was trying to avoid floating divs.

If I need multiple rows with one cell in each row per column, do I embed each cell in a row or just create each row and not declare cells. I understand that browsers automatically create the missing elements but I want to make sure I do this properly to avoid any side effects that might occur due to the browser automatically creating the missing elements.

Edit:

I think my brain is just over worked, I guess I can accomplish this by just using 3 divs in the first column instead of using a nested table div with the rows. This just popped into my head.

For the first column, if I just added 3 normal divs to simulate the rows I need would this be good approach considering compliance, standards, and compatibility? Or would the browser attach anonymous table-cells/table-rows to the normal divs? — Damainman
I like to only use tables for tabular data, not for actual layout :). — Damainman
@Damainman: Provide us your code so we can investigate it too quick. — Krish
Load your code fragment in jsfiddle.net so everyone can collaborate and edit your code. — Dexter Huinda

darkAsPitch darkAsPitch · Accepted Answer · 2012-07-04T01:03:37

How about something like this?

<table>
    <tr>
        <td>
            Content One
        </td>
        <td>
            Content Two
        </td>
        <td>
            Content Three
        </td>
    </tr>
    <tr>
        <td colspan="3">
            MainVontent Four
        </td>
    </tr>
</table>

Or like this?

<table>
    <tr>
        <td>
            Content One
        </td>
        <td>
            Content Two
        </td>
        <td>
            Content Three
        </td>
    </tr>
    <tr>
        <td>
            <!-- INTENTIONALLY BLANK -->
        </td>
        <td>
            MainVontent Four
        </td>
        <td>
            <!-- INTENTIONALLY BLANK -->
        </td>
    </tr>
</table>

Three column layout with CSS display table, with first row having multiple rows?

1 Answers