Wsrtjtyk

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

    <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>

CSS

.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;

}

Example can be found here. Make the HTML table wider and smaller, the right border will dissapear.
http://jsfiddle.net/gqmJ9/

May be this is what u want:

http://jsfiddle.net/Bh8hg/1/

Simply made a real border to the left div.

#containerLeft {

    background: #F0F;

    position:   relative;

    display:    block;

    overflow:   auto;

    margin:     0px 0px 15px 0px;

    border:     #F0F 15px solid;    //real border

}

also remove <div style="width:14px;"></div>,
it's not good idea to put style in html, hard to maintain.