html - How to make table take up 100% of remaining space? -
html
<div id="a"> <table id="b"> <tr><td></td></tr> </table> </div> css
* { margin: 0; padding: 0; } #a { background-color: yellow; } #b { background-color:red; height: 50px; margin-left: 50px; width: 100%; } i want table #b span 50px left of container (#a) way right edge of of #a.
by setting width 100% goes off page because tries matching width of #a. if omit width table small.
setting table display:block , removing width seems give desired behaviour. reliable, or there method of achieving same thing? i'd prefer not resort absolute positioning.
one way is use box-sizing: border-box
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } ... #a { ... padding-left: 50px; } unlike sirko's answer, work in ie8+ , not ie9+
another way use conflicting absolute positioning
Comments
Post a Comment