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.

jsfiddle

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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -