div重叠一个表

Question

我尝试过各种各样的选项，例如重叠等等，但是我无法阻止div将表重叠到右边。

我为我的代码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

float:left;和position:absolute;都不能在一起。在这种情况下，从左侧框中删除绝对定位：

如果我猜对了，这就是你要求的：

Fiddle 1 或 Fiddle 2

---

点击查看更新的小提琴： - With code / fullscreen

Answer 2

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

Answer 3

删除

position : absolute;

并添加

width: 40%  !important;

在类'ff_other_articles'中并检查我在html中所做的更改。

小提琴：http://jsfiddle.net/LPJAa/

感谢。

Answer 4

为什么不为此使用css table .... ??

我已删除<br />以便于理解....并删除了float，因为如果您使用floats，则不需要html, body { width:100%; height:100%; margin:0; padding:0; } #main_container { display:table; width:100%; border:1px dashed #000; } .table_box_1 { display:table-cell; width:200px; border:1px dashed red; } .table_box_2 { display:table-cell; width:50%; border:1px dashed red; } 。here is the demo

{{1}}