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: 237
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 arround 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.
© Pro Webmasters or respective owner