css - How to keep html table on same line without specifying a width? -
i can't seem keep (dynamic width) table on same line previous element , have extend it's parent container without exceeding , overflowing. don't want horizontal scrollbar table should break lines and/or words make more narrow. however, it's not doing that.
in fiddle, table overflows , extends beyond it's parent container's width. parent container using white-space: nowrap
keep on same line content next it.
why not sizing it's width correctly? if set fixed width on table, works , sizes width correctly, need width of table dynamic. outermost containing div fixed.
any ideas?
if add
.listinfotbl { [...] max-width: 142px; [...] }
then you'll see working. may wonder why that?
the answer set width div.listpropertydiv therefore won't grow beyond , additionally there's padding take formula:
innerwidth(.listpropertydiv) = innerwidth(#left) - border(.listpropertydiv) - padding(.listpropertydiv) - margin(.listpropertydiv) innerwidth(.listpropertydiv) = 397px therefore: width(table.listinfotbl) <= innerwidth(.listpropertydiv) - width(img.listimage) width(table.listinfotbl) <= 142px
you should overthink having fixed width on #left, if thinking dynamically changing content's width because if parent doesn't shrink it's children can't.
a fixed fiddle maybe is you're looking for solution max-width , percentage objects can shrink accordingly.
Comments
Post a Comment