Текст всплывает из его div

Question

Я имею дело с текстом, который выходит из его div.Я закодировал главную страницу.Таким образом, независимо от длины основного контента, он должен заставить суб-контент (серую область и нижний колонтитул) двигаться вниз.

Вы видите, как фиктивный текст действует

URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm

Я достиг этого раньше, но почему-то он сейчас не работает.

Answer 1

Вы установили явную высоту для этого div.Чтобы изменить его содержимое, вам нужно установить height: auto.(или никогда не устанавливайте его высоту в первую очередь)

РЕДАКТИРОВАТЬ: Как сказал ANeve, вам нужно будет удалить высоту как .article, так и .opentext, а также выВам нужно будет поставить clear:left на .lower-container, чтобы опустить нижний колонтитул.

Answer 2

Если у вас есть элемент, который содержит только плавающие элементы, высота контейнера будет равна нулю. Чтобы это исправить, вы можете добавить очищающий div (<div style="clear:both"></div>).

Если вы добавите очищающий div в конце раздела # under-content, он автоматически отрегулирует высоту раздела в соответствии с его содержимым.

Другая проблема, с которой вы столкнулись, заключается в том, что вы используете относительное расположение элементов div .opentext. Когда вы устанавливаете свойство top, оно фактически выталкивает содержимое вниз, заставляя его перекрываться с вашим # lower-container. Вам лучше использовать свойство 'margin-top', которое увеличит размер .opentext div, чтобы соответствовать всему содержимому.

Итак, вкратце:

• Добавить <div style="clear:both"></div> в конце # under-content <section>
• Измените 'top: 82px' на 'margin-top: 82px' в вашем .opentext div

Надеюсь, это поможет!

Answer 3

Вы установили свойство height для ваших .article и .opentext делений. Если вы удалите это свойство, содержимое должно соответственно расшириться.

Однако вам также необходимо отрегулировать расположение фонового изображения. Вы должны сами установить фоновое изображение .footer, а не полагаться на одно статическое фоновое изображение для всей страницы.

Answer 4

Просто используйте wordwrap: break-word;для div, и он будет разбивать слово на следующую строку.