html - 与表格重叠的 div

Question

我尝试了各种选项，例如重叠等，但我无法阻止 div 将表格重叠到右侧。

我为我的代码创建了一个 fiddle http://jsfiddle.net/ntEzL/帮助解释我的问题。

    <div style="border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; overflow: hidden;">
    <br>
    <br>
    <table class="ff_sidebox" cellspacing="5" style="width:22em;">Latvia
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
        <tr class="">
            <th scope="row" style="text-align:left; white-space: nowrap">Full Name</th>
            <td class="" style="white-space: nowrap">Republic of Latvia</td>
        </tr>
    </table>
    <!-- end of sidebox for Latvia -->
    <br>

    <br>
    <div class="ff_other_articles_caption" id="recent_articles_caption">Recent articles on Latvia</div>
    <div class="ff_other_articles" id="recent_articles">
        <div class="ff_other_articles_inner" id="recent_articles_inner">
            <ul class="block_list">
                <li> <a href="http://">Latvia becomes 18th Euro Member on Jan 1st</a>

                </li>
            </ul>
        </div>
    </div>
    <br>
    <br>

    <br>
</div>

在较宽的屏幕上没有问题，但在较小的分辨率上我就会遇到问题。

如果左边框 (div) 的内容放不下，我宁愿滚动到两行。

有什么想法吗？

谢谢。

Answer 1

试试这个..对于 .ff_other_articles 样式，删除 position: absolute 并添加 width:33%