X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Блок выходит за пределы своего родителя.
matador2011
matador2011
Topic Starter сообщение 7.10.2015, 3:02; Ответить: matador2011
Сообщение #1


Участник
***

Группа: User
Сообщений: 165
Регистрация: 15.12.2011
Поблагодарили: 18 раз
Репутация:   4  


Всем привет! Подскажите пожалуйста, почему иногда при верстке блок выходит за пределы своего родителя хотя не должен. Вот, например, код и css свойства. Если для блока #twitter не указывать свойство float:left, то все отображается нормально, если если его указать ( а мне без него никак) то получается, что в блоке оказывается только заголовок H3, а все остальное выходит за пределы блока #twitter (изображено на скриншоте http://itmages.ru/image/view/3068042/909477b1 ), из-за чего некоректно отображается футер... почему так происходит?

<footer>
<div id="footer">
<div id="twitter">
<h3>TWITTER FEED</h3>
<date><a href="#">23 oct</a></date>
<p>Quisque in enim velit, at dignissim est. Nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.</p>
</div>
<div id="sitemap"><h3>SITEMAP</h3></div>
<div id="social"> </div>
<div id="logo-footer"> </div>
</div>
</footer>


свойства css:

#footer {
width: 960px;
margin: auto;
padding: 10px 0;
}
footer {
width: 100%;
background-color: #7e7e7e;
}
footer p {
margin: 5px 0;
}
#twitter {
width: 300px;
float:left;
}
#footer H3 {
margin: 0 0 10px 0;
color: #fff;
font: 14px 'Oswald', sans-serif;
border-bottom: 1px solid #919191;
}
#twitter date a{
color: #b4aeae;
}
#twitter p {
margin-top: 8px;
color: #dbdbdb;
padding-right: 15px;
}

Сообщение отредактировал matador2011 - 7.10.2015, 3:09
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rm_inc
rm_inc
сообщение 7.10.2015, 3:18; Ответить: rm_inc
Сообщение #2


Новичок
*

Группа: User
Сообщений: 26
Регистрация: 5.10.2015
Поблагодарили: 1 раз
Репутация:   0  


Еще раз что нужно сделать? я так понимаю верстки там кусок - запустите все на http://jsfiddle.net/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
graycat777
graycat777
сообщение 7.10.2015, 8:42; Ответить: graycat777
Сообщение #3


Новичок
*

Группа: User
Сообщений: 46
Регистрация: 8.4.2015
Из: Украина
Поблагодарили: 21 раз
Репутация:   10  


Читайте: Очистка плавающих элементов: обзор различных методов clearfix


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 7.10.2015, 10:28; Ответить: Gerga
Сообщение #4


Участник
***

Группа: User
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


matador2011, добавьте к стилям:
Код
#footer:after {content:"";display:block;clear:both}


В данном случае мы добавили псевдоэлемент "after" для блока #footer и добавили clear:both. Это самое clear:both отменяет свойство float.

Сообщение отредактировал Gerga - 7.10.2015, 10:34


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 7.10.2015, 11:10; Ответить: mmkulikov
Сообщение #5


Старожил
******

Группа: Active User
Сообщений: 2027
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(matador2011 @ 7.10.2015, 1:02) *
из-за чего некоректно отображается футер... почему так происходит?

Потому, что высоту Вашего футера браузер перестал корректно просчитывать.
Для решения проблемы (довольно распространенной, кстати) необходимо
либо явно задать высоту блоку #footer
либо заставить браузер не "полениться" и просчитать всю высоту,
этого можно достичь с помощью overflow
Вот рабочий код http://jsfiddle.net/uwf7n94u/


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Адаптивный блок Adsense не подстраивается
3 Konark 770 30.11.2017, 7:48
автор: Nell
Открытая тема (нет новых ответов) Куплю места на мордочках, под сквозные ссылочки под блок сквозных ссылок.
тематика: СМИ,Туризм,Медицина
4 SeoGanik 1488 18.2.2017, 12:33
автор: SeoGanik
Открытая тема (нет новых ответов) Занимаюсь веб-дизайном. Выходит неплохо.
5 000 руб. - главная
6 JackBlack 1984 13.2.2017, 9:15
автор: JackBlack
Открытая тема (нет новых ответов) Интересует регистрация в каталогах и обьявлениях (без своего сайта)
4 serg-ss 758 12.4.2016, 11:34
автор: serg-ss
Открытая тема (нет новых ответов) SocPlugin 4.0.15: продвижение в соц.сетях выходит на новый уровень
3 Radichenko 1703 3.12.2014, 2:03
автор: Deitona


 



RSS Текстовая версия Сейчас: 16.12.2017, 3:35
Дизайн