3 column layout with css display table, with first row having multiple rows?

Posted by Damainman on Pro Webmasters See other posts from Pro Webmasters or by Damainman
Published on 2012-06-15T23:24:50Z Indexed on 2012/06/16 3:24 UTC
Read the original article Hit count: 234

Filed under:
|

I am working on a new website which:

  1. Has 3 columns - Each Column being a cell
  2. First column has 3 rows (Logo, Nav, icons) - Has a Div with display: table which wraps arround 3 divs with display:table-row.
  3. 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.

  1. 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.

© Pro Webmasters or respective owner

Related posts about css

Related posts about table