CODEWITHSUNDEEP
htmlcss
David Unric
David Unric

Reputation: 7719

What breaks this table layout?

Simple contents layout using CSS's table, table-row and table-cell divs:

<div style="display:table-cell; border:1px solid blue">
    some content  <!-- this line wrappend in <p> tag in next example -->
    <p>some content</p>
    ...
</div>

two column layout with a nested table on the right

The above example but with left cell's content placed in paragraph (the first row):

above example but <p> breaking flow of the right table-cell

As you can see, after <p> tag put in left cell the right cell is shifted down. It doesn't matter if I use <p> or <h1> tag. Assume it does change line-height and 1st row in the adjacent cell is aligned to it.

Can anybody explain this behaviour. How can I prevent shifting of the adjacent cell ?

Upvotes: 0

Views: 171

Answers (2)

Milche Patern
Milche Patern

Reputation: 20452

It is adopting the browser default behavior of a 'table-cell' by vertically aligning it to inherit, inherit, middle. (Strangely bottom in your page ).

Just add 'vertical-align:top' to your CSS will FOR SURE fix your situation. jsFiddle forked here

For example, Firefox [user agent html.css] :

tr {
  display: table-row;
  vertical-align: inherit;
}
tbody {
  display: table-row-group;
  vertical-align: middle;
}
thead {
  display: table-header-group;
  vertical-align: middle;
}
tfoot {
  display: table-footer-group;
  vertical-align: middle;
}
/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}

Upvotes: 3

upful
upful

Reputation: 960

It looks like something to do with the margins the browser is adding to the <p> tag automatically try this...

div[style*="table-cell"] p:first-child {
  margin: 0;
}

Upvotes: 0

Related Questions