css - Table inside inline block breaks vertical alignment -


i meet problem project project, still don't understand why arises.

usually need header like:

<header><table><td valign="top">1st block</td><td valign="top">2nd block</td></table></header> 

information in 2nd block should placed on right edge, set text-align:right <td>, , create inline-block div inside it. text, divs , other elements inside said div located correctly, if create table , put them therein, said inline-block div gets 2-4 pixels higher should be. http://jsfiddle.net/njaqb2eu/4/

how fix it?

i think need reset elements. browser defaults causing trouble:

td, tr, table, th{     padding: 0;     border-spacing:0; } .full_width{width:100%} .full_height{height:100%}  .header{width:98%;height:60px;border:2px solid #eee} .header-center{width:70%;height:100%;margin:0 auto}  .header-part_1{width:30%;    display: table-cell;   vertical-align: middle; } .header-part_2{width:70%;  display: table-cell;   vertical-align: middle;}  .header-text{border:1px solid black} .inline-block{border:1px solid red} 

Comments

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -