div перекрывая стол

0

Я пробовал различные варианты, такие как совпадение и т.д., Но я не могу остановить 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) для прокрутки до двух строк, если он не может поместиться там.

Есть предположения?

Благодарю.

  • 0
    хм ... может я имел ввиду оверлей, извини. Не уверены, что такое совпадение?
Теги:

4 ответа

0

почему бы не использовать table css для этого....??

я удалил <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;
}
Поделиться
0

Удалить

position : absolute;

и добавить

width: 40%  !important;

в классе "ff_other_articles" и проверьте изменения, внесенные мной в html.

скрипка: http://jsfiddle.net/LPJAa/

Благодарю.

Поделиться
0

Оба float:left; и position:absolute; не может быть вместе. В этом случае удалите абсолютное позиционирование из окна слева:

Если я догадываюсь, это то, о чем вы просили:

Скрипт 1 или скрипка 2

Нажмите, чтобы увидеть обновленную скрипку: - С кодом/полноэкранным

Поделиться
  • 0
    Спасибо, но проблема в том, что если я уберу абсолют, то, как вы говорите, коробка падает, что не идеально, так как оставило бы очень большое пустое пространство.
  • 0
    тогда что вы хотите. Должен ли он минимизировать его размер при изменении размера?
Показать ещё 5 комментариев
0

Попробуйте это.. для .ff_other_articles стилей, удалите position: absolute и добавьте width:33%

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню