CSS display table-row does not expand when width is set to 100

Question

I m having a bit of a problem  I m using FireFox 3 6 and have the following DOM structure    lt div class  view-row  gt       lt div class  view-type  gt Type lt  div gt       lt div class  view-name  gt Name lt  div gt                   lt  div gt    And the following CSS    view-row   width 100   display table-row      view-name   display  table-cell  float right      view-type   display  table-cell      If I take off the display table-row it will appear correctly  with the view-row showing a width of 100   If I put it back it shrinks down  I ve put this up on JS Bin   http   jsbin com ifiyo  What s going on

User · Answer

give on  view-type class float left  or delete the float right  of  view-name  edit  Wrap your div  lt div class  view-row  gt  with another div for example  lt div class  table  gt   and set the following css     table       display table      width 100      You have to use the table structure for correct results

User · Answer

You can nest table-cell directly within table  You muslt have a table  Starting eith table-row does not work  Try it with this HTML    lt html gt     lt head gt       lt style type  text css  gt   table     display  table    width  100      tr     display  table-row    width  100      td     display  table-cell         lt  style gt     lt  head gt     lt body gt        lt div class  table  gt         lt div class  tr  gt           lt div class  td  gt            X          lt  div gt           lt div class  td  gt            X          lt  div gt           lt div class  td  gt            X          lt  div gt         lt  div gt       lt  div gt          lt div class  tr  gt           lt div class  td  gt            X          lt  div gt           lt div class  td  gt            X          lt  div gt           lt div class  td  gt            X          lt  div gt         lt  div gt        lt div class  table  gt           lt div class  td  gt            X          lt  div gt           lt div class  td  gt            X          lt  div gt           lt div class  td  gt            X          lt  div gt       lt  div gt      lt  body gt   lt  html gt

User · Answer

If you re using display table-row etc   then you need proper markup  which includes a containing table  Without it your original question basically provides the equivalent bad markup of    lt tr style  width 100   gt       lt td gt Type lt  td gt       lt td style  float right  gt Name lt  td gt   lt  tr gt    Where s the table in the above  You can t just have a row out of nowhere  tr must be contained in either table  thead  tbody  etc    Instead  add an outer element with display table  put the 100  width on the containing element  The two inside cells will automatically go 50 50 and align the text right on the second cell  Forget floats with table elements  It ll cause so many headaches   markup    lt div class  view-table  gt       lt div class  view-row  gt           lt div class  view-type  gt Type lt  div gt           lt div class  view-name  gt Name lt  div gt                       lt  div gt   lt  div gt    CSS    view-table       display table      width 100      view-row        display table-row     view-row  gt  div       display  table-cell     view-name        text-align right

User · Answer

Tested answer   In the  view-row css  change   display table-row    to   display table   and get rid of  float   Everything will work as expected   As it has been suggested in the comments  there is no need for a wrapping table  CSS allows for omitting levels of the tree structure  in this case rows  that are implicit  The reason your code doesn t work is that  width  can only be interpreted at the table level  not at the table-row level  When you have a  table  and then  table-cell s directly underneath  they re implicitly interpreted as sitting in a row   Working example    lt div class  view  gt       lt div gt Type lt  div gt       lt div gt Name lt  div gt                   lt  div gt    with css    view     width 100     display table      view  gt  div     width 50     display  table-cell

User · Answer

Note that according to the CSS3 spec  you do NOT have to wrap your layout in a table-style element  The browser will infer the existence of containing elements if they do not exist

[css] CSS display:table-row does not expand when width is set to 100%

Examples related to css