html - How to make table take up 100% of remaining space? -


fiddle

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

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -