Как закрепить див под таблицей

@culver · Регистрация: 16.04.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.

Имею такой HTML код:

HTML5

<table  width="100%"> ... </table>
<div class="add_inf_horb" >&nbsp;
    <div class="add_inf_horb_l" ></div>
    <div class="add_inf_horb_r" ></div>
</div>

CSS код:

CSS

1
2
3

.add_inf_horb {height:3px;background:url(/images/add_inf_hor_border.png) repeat-x;}
.add_inf_horb_l {float:left;height:3px;width:50px; background:url(/images/add_inf_hor_border_left.png) repeat-x;}
.add_inf_horb_r {float:right;height:3px;width:50px; background:url(/images/add_inf_hor_border_right.png) repeat-x;}

Высота таблицы не фиксирована.

При отобрадении внутренние дивы остаются под таблицей, а внешний див поднимаестя вверх и становится вверху за таблицей.

Подскажите, пожалуйста, как его оставить под таблицей?

@Fedor92 · 23.07.2015, 23:52

culver, добавьте внешнему диву свойство float:left, как вариант...

@culver · 23.07.2015, 23:57 **[ТС]**

Но он тогда сомкнётся. Я хочу, что бы он занимал всю ширину таблицы. По сути, этими дивами я хочу сделать декоративный горизонтальный разделитель между таблицей и последующим контентом.

@Fedor92 · 24.07.2015, 00:09

culver, тогда не понимаю сути вопроса... Вот скрин...

Красным выделены границы таблицы... Зелёные границы и внешнего дива и синим выделены вложенные блоки... Как видите внешний див находится под таблицей...

@culver · 24.07.2015, 00:14 **[ТС]**

Прошу, прощения, я цветоаномал, синий вижу, красный от зелёного отличаю плохо.
Но, как я понял, у Вас внешний див располагается под таблицей.
Почему же тогда у меня он заскакивает за таблицу. Подскажите куда копать.

@Fedor92 · 24.07.2015, 00:23

Сообщение от culver

Почему же тогда у меня он заскакивает за таблицу. Подскажите куда копать.

Даже не знаю, что Вам подсказать... Возможно в Ваших стилях css есть правило, которое конфликтует с правилами для дива, которые Вы прописали... Таким свойством может, например быть position:absolute... Вот код, который я набросал...

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
    </head>
    <style>
        html, body{width:100%;height:100%;  margin:0}
      .add_inf_horb {height:3px;background:url(/images/add_inf_hor_border.png) repeat-x; border:2px solid green}
.add_inf_horb_l {float:left;height:3px;width:50px; background:blue}
.add_inf_horb_r {float:right;height:3px;width:50px; background:blue}
table, tr,td{border:2px solid red}
    </style>
    <body>
<table  width="100%"> ... 
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
</table>
 
<div class="add_inf_horb" >&nbsp;
    <div class="add_inf_horb_l" ></div>
    <div class="add_inf_horb_r" ></div>
</div>
    </body>
</html>

Сравните со своим может найдёте ответ...

@culver · 24.07.2015, 00:35 **[ТС]**

Спасибо, решил проблему добавлением width:100%; float:left; к стилям внешнего дива. Но почему он заскакивал - так и не понял.

@Fedor92 2961 / 2582 / 1068 Регистрация: 15.12.2012 Сообщений: 9,750 Записей в блоге: 11
	23.07.2015, 23:52	2
	culver, добавьте внешнему диву свойство float:left, как вариант... 0

@culver 0 / 0 / 0 Регистрация: 16.04.2013 Сообщений: 25
	23.07.2015, 23:57 [ТС]	3
	Но он тогда сомкнётся. Я хочу, что бы он занимал всю ширину таблицы. По сути, этими дивами я хочу сделать декоративный горизонтальный разделитель между таблицей и последующим контентом. 0

@Fedor92 2961 / 2582 / 1068 Регистрация: 15.12.2012 Сообщений: 9,750 Записей в блоге: 11
	24.07.2015, 00:09	4
	culver, тогда не понимаю сути вопроса... Вот скрин... Красным выделены границы таблицы... Зелёные границы и внешнего дива и синим выделены вложенные блоки... Как видите внешний див находится под таблицей... 0

@culver 0 / 0 / 0 Регистрация: 16.04.2013 Сообщений: 25
	24.07.2015, 00:14 [ТС]	5
	Прошу, прощения, я цветоаномал, синий вижу, красный от зелёного отличаю плохо. Но, как я понял, у Вас внешний див располагается под таблицей. Почему же тогда у меня он заскакивает за таблицу. Подскажите куда копать. 0

@culver 0 / 0 / 0 Регистрация: 16.04.2013 Сообщений: 25
	24.07.2015, 00:35 [ТС]	7
	Спасибо, решил проблему добавлением width:100%; float:left; к стилям внешнего дива. Но почему он заскакивал - так и не понял. 0

Опции темы