Выход текста или таблицы за рамки первоначального блока

January 5, 2015

Уже не в первый раз сталкиваюсь с подобной проблемой. Порой находил выход из ситуации с переразмещением некоторых блоков, а также добавлением новых. Но то было раньше, то были мои первые более менее на что-то похожие работы, впрочем, там было слишком много кода, причем лишнего, поскольку со временем я нашел более приемлемые варианты составления этих же шаблонов. На тот момент упор делался на общую картинку, а не на правильность составления кода, ну и все что с этим связано. Раньше сталкивался лишь с небольшой переделкой уже готовых и полноценных шаблонов, но не так давно решил заняться изучением самого процесса их создания, практически с нуля. Вот как сейчас. На данный момент меня интересует причина возникновения данной проблемы, а ее суть в том, что текст, ну или же сам блок или таблица с текстом выходит за рамки первоначального блока, не смотря на то, что параметр "height" установлен на "auto". Возможно обьяснить так как оно нужно, у меня и не получится, поскольку в терминах пока не особо силен. Потому я и приложу несколько скринов в конце темы, а также сам код, но лишь той работы, которую я начал сегодня, и практически сразу столкнулся с подобной проблемой. В случае если понадобится код от второго скрина, я также готов его выложить, но там, как по мне, достаточно много лишнего, поскольку на данном этапе я лишь экспериментирую. Так вот, в чем же заключается проблема? В чем моя ошибка, что я делаю не так? Почему возникает данная ситуация, и можно ли это исправить? Очень хотелось бы получить помощь в этом вопросе, поскольку каждый раз, будь то в самом начале, или же в процессе, я в любом случае сталкиваюсь с этой проблемой. Чего только не пробовал, где только не искал, ну ничего не нашел, абсолютно. Скорей всего это в связи с моими небольшими познаниями в этой области, а так же из-за того, что я попросту не смог правильно составить поисковой запрос. Сама проблема, а так же скрины, в том числе и код:

<!doctype html><html><head><meta charset="utf-8"><title>Документ без названия</title></head><style>body {background: #ccc;margin: 0;padding: 0;} #wrap {background: #FF0004;width: 1020px;height: auto;margin: 0 auto;padding: 0;} #top {background: #ABABAB;width: 100%;height: 200px;clear: both;} #middle {background: #f1f1f1;width: 700px;height: 400px;float: left;} #sidebar {background: #e1e1e1;width: 250px;height: 200px;float: right;} #bottom {background: #717171;width: 100%;height: 50px;clear: both;}</style><body><div id="wrap"><div id="top"></div><div id="middle">432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br>432634634<br></div><div id="sidebar"></div><div id="bottom"></div></div></body></html>

Заранее благодарю.

psywalker · January 5, 2015

Секундочку, но ведь здесь явно выставлена жёсткая высота?

#middle {background: #f1f1f1;width: 700px;height: 400px;float: left;}

January 5, 2015

Секундочку, но ведь здесь явно выставлена жёсткая высота?
#middle {background: #f1f1f1;width: 700px;height: 400px;float: left;}

Так-то оно так. Даже не представляю, что можно было бы сказать в моей ситуации. Мне действительно стыдно, ведь и вправду, на нынешний момент дело было именно в этом. Переменил параметр, перелистал второй вариант, тот что во втором скрине идет, там была такая же проблема. В следующий раз постараюсь быть более внимателен к подобным вещам. Огромное вам спасибо. И еще раз извиняюсь за такую оплошность. Но помимо этого, у меня есть еще вопрос, а также, хотелось бы отметить то, что при первой моей попытке сделать что-то подобное полноценной странице, как раз таки не было подобных ошибок, даже сейчас пересмотрел, но страница почему-то все равно сворачивалась, сразу же как я выставлял параметр "auto". Т.е. нижний блок, он же "bottom" уходил под предполагаемую "будущую" новость, которая в данном случае являлась "middle", а так же под навигационный блок, причем та часть, где находился "middle" и "sidebar", точнее их фон, он полностью пропадал из виду, а "bottom" перемещал к самой шапке, находясь под другими блоками. Было это достаточно давно, и к сожалению скринов предоставить не могу, как и самого кода, именно в том виде, в каком он был на тот момент. Кстати, насчет вопроса. Я так понимаю, применение параметра "clear: both" в качестве блока, без каких-либо иных параметров кроме этого, после всех остальных, т.е. после "новостного" и навигационного является вполне обычным явлением? В общем, пока что вопросы отпадают, поскольку действительно стоило бы еще немного поэкспериментировать. Снова же, огромное вам спасибо за помощь.

psywalker · January 5, 2015

Эм... я прочитал что вы пишите, и наверное даже понял вас)). Если бы вы делили ваш текст на абзацы со строкой в качестве отступа, то понять вас было бы намного легче А пока по поводу примера: жаль, что у вас не сохранился этот пример, потому что скорее всего вы ошибаетесь так же, как и в данном случае. Но видимо ~~это уже в другой серии~~ об этом мы уже не узнаем

На счёт "clear: both": нет, это свойство применяется при:

Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.

Взято отсюда.

Sign In

Выход текста или таблицы за рамки первоначального блока

Question

Guest

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information