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



 

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

Открыть тему
Тема закрыта
> Два div горизонтально, третий под ними
valera-k
valera-k
Topic Starter сообщение 24.6.2016, 15:24; Ответить: valera-k
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 62
Регистрация: 4.12.2010
Из: Санкт-Петербург
Поблагодарили: 11 раз
Репутация:   5  


Возникла проблема, в опере и ie все нормально, в хроме и фоксе не работает,
третий див убегает наверх

<div style="width:200px; float=left;"></div>
<div></div>
<div class="footer"></div>

Как footer оставить под двумя горизонтальными дивами?


0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WoWeb
WoWeb
сообщение 24.6.2016, 15:38; Ответить: WoWeb
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 426
Регистрация: 18.8.2015
Поблагодарили: 176 раз
Репутация:   34  


valera-k,

Попробуйте:
Код
.footer{
float:none;
clear:both;
}


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 24.6.2016, 16:33; Ответить: falken
Сообщение #3


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


valera-k, любитель говно-кода?) тогда первый способ вам не понравится - CSS нужно применять, а второй самое то! Стили в html коде, просто мечта, как вы и любите.


Способ 1.

CSS:
Код
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1
}

HTML:
Код
<div class="clearfix">
<div style="width:200px; float:left;"></div>
</div>
<div class="footer"></div>

и футер никуда не убежит.
в дальнейшем применяйте эту конструкцию везде, где нарушается поток.


Способ 2.

HTML:
Код
<div style="width:200px; float:left;"></div>
<div style="clear:both;"></div>
<div class="footer"></div>

или
Код
<div style="width:200px; float:left; clear:both;"></div>
<div></div>
<div class="footer"></div>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
valera-k
valera-k
Topic Starter сообщение 25.6.2016, 11:07; Ответить: valera-k
Сообщение #4


Частый гость
**

Группа: User
Сообщений: 62
Регистрация: 4.12.2010
Из: Санкт-Петербург
Поблагодарили: 11 раз
Репутация:   5  


Цитата(falken @ 24.6.2016, 15:33) *
valera-k, любитель говно-кода?) тогда первый способ вам не понравится


1. Я так написал для наглядности и упрощения восприятия.
2. Вы сами то проверяли, то чего предлагаете?
ваш вариант 1 размещает див В ДИВЕ, а не рядом, и обтекает его, чего быть не должно
вариант 2 во всех браузерах все 3 дива один под другим.



Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 25.6.2016, 15:32; Ответить: falken
Сообщение #5


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Цитата(valera-k @ 25.6.2016, 10:07) *
1. Я так написал для наглядности и упрощения восприятия.

Для упрощения восприятия нужно показывать код как в исходниках (в идеале, чтобы вместо контента в блоках были поясняющие записи), а еще лучше наглядно демонстрировать на jsfiddle и детальней описывать задачу, ага?

Цитата(valera-k @ 25.6.2016, 10:07) *
ваш вариант 1 размещает див В ДИВЕ, а не рядом, и обтекает его, чего быть не должно

Так, лол, в чем проблема? Добавьте второй див и он будет обтекать первый, но при этом футер останется на своем месте:

Код
<div class="clearfix">
    <div style="width:200px; float:left;"></div>
    <div></div>
</div>
<div class="footer"></div>


Есть задача:
Цитата(valera-k @ 24.6.2016, 14:24) *
Как footer оставить под двумя горизонтальными дивами?

Задача, казалось бы, решена (футер не убегает):
Цитата(valera-k @ 25.6.2016, 10:07) *
вариант 2 во всех браузерах все 3 дива один под другим.


Если даете код, то поясняйте тогда что к чему и как на выходе должны располагаться блоки (все блоки)... А потом возмущаетесь что непонятный пустой контейнер куда-то делся.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kumidzeke
Kumidzeke
сообщение 27.6.2016, 17:46; Ответить: Kumidzeke
Сообщение #6


Участник
***

Группа: User
Сообщений: 155
Регистрация: 19.9.2013
Из: Home
Поблагодарили: 49 раз
Репутация:   4  


Прочесть третью статью из выдачи гугла по запросу flexbox. И забыть про float.

Или добавлять как предложил товарищ falken clear: both;

Лично я за первый вариант :D

upd:
Цитата
в хроме и фоксе не работает, третий див убегает наверх

Ничего подобного, в хроме ничего не убегает, следовательно проблемы на вашей стороне.

http://codepen.io/anon/pen/dXvyPY

Сообщение отредактировал Kumidzeke - 27.6.2016, 17:47


--------------------
Telegram — @za4me
Skype — Kumidzeke
Vk — vk.com/za4me


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
valera-k
valera-k
Topic Starter сообщение 27.6.2016, 23:00; Ответить: valera-k
Сообщение #7


Частый гость
**

Группа: User
Сообщений: 62
Регистрация: 4.12.2010
Из: Санкт-Петербург
Поблагодарили: 11 раз
Репутация:   5  


Цитата(Kumidzeke @ 27.6.2016, 16:46) *
Прочесть третью статью из выдачи гугла по запросу flexbox. И забыть про float.


Реально удобная штука.

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продам сайт под развитие
Под будущий СДЛ, тематика бизнес, возраст 1 год
6 abafons 1405 Сегодня, 12:55
автор: abafons
Открытая тема (нет новых ответов) 16 площадок под размещение сквозных ссылок
Сайты: СМИ, финансы, авто, медицина, туризм, кулинария под сквозняки
9 inkon 1970 15.12.2017, 20:44
автор: inkon
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыEdu-Money - партнерка под студентческий траф: 55% за новый заказ, 20% ребилл (сразу).
95 EduMoney 17546 15.12.2017, 12:48
автор: EduMoney
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыEssayPro.Money партнерка под студенческий траф 50%+20% комиссии
61 Mur4ikovsky 12115 14.12.2017, 21:00
автор: EssayPro
Открытая тема (нет новых ответов) Ad4date.com - CPA-сеть под adult/dating трафик
4 moneytommylee 1338 13.12.2017, 17:45
автор: moneytommylee


 



RSS Текстовая версия Сейчас: 17.12.2017, 21:56
Дизайн