hide div table's content based upon remaining space

[khashak]

I have two div boxes next to each other. The left box containing a "div table". When resizing the page, I want the content of the left div table to be hidden, e.g. overflow: hidden.However, the left box contains the "remaining" space, whereas the right box has a width of 35%.When the content of the div table is wider than "the remaining space" (width of the left box), than the right border of the table is not visible anymore.I would like to hide the remaining of the image, but keep seeing the right border of the div table. Can this be done using div tables?HTML\[code\] <div class="table" id="containerRight">Some content on the right</div><div id="containerLeft"> <div class="table" id="tableLeft"> <div class="table-row"> <div class="table-cell"> <div style="width:14px;"></div> </div> <div class="table-cell">Some title</div> <div class="table-cell"> <div style="width:14px;"></div> </div> </div> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"> <!-- This is the content of the LEFT table --> <img src="http://oasis-church-nj.com/wp-content/uploads/2011/04/easter-egg.jpg" style="height:100px; width:500px;" /> </div> <div class="table-cell"></div> </div> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> </div> </div></div>\[/code\]CSS\[code\].table { display: table; overflow: hidden; border-collapse: collapse;}.table-row { display: table-row;}.table-cell { display: table-cell; word-break: all; overflow: hidden;}#containerLeft { background: #F0F; position: relative; display: block; overflow: hidden; margin: 0px 0px 15px 0px;}#containerRight { background: #FF0; position: relative; min-width: 220px; max-width: 400px; width: 35%; height: 300px; float: right; margin: 0px 0px 15px 15px;}\[/code\]Example can be found here. Make the HTML table wider and smaller, the right border will dissapear.http://jsfiddle.net/gqmJ9/