float

[psywalker]

psywalker,

марджины, clearfix, в зависимости от ситуации inline-block или float

марджины не решают проблему, с clearfix хотелось бы увидеть примерчик. inline-block или float сужаются до ширины содержимого, что тоже хреново.

[sigma77]

psywalker,

марджины, clearfix, в зависимости от ситуации inline-block или float

марджины не решают проблему, с clearfix хотелось бы увидеть примерчик. inline-block или float сужаются до ширины содержимого, что тоже хреново.

http://jsfiddle.net/CjpBS/3/

Кстати, заметила, что у тебя в примере и clearfix и overflow: hidden

inline-block и float ничто не мешает задать ширину.

[psywalker]

psywalker,

марджины, clearfix, в зависимости от ситуации inline-block или float

марджины не решают проблему, с clearfix хотелось бы увидеть примерчик. inline-block или float сужаются до ширины содержимого, что тоже хреново.

http://jsfiddle.net/CjpBS/3/

Кстати, заметила, что у тебя в примере и clearfix и overflow: hidden

Да, на обычные блоки я вешаю clearfix , а для контента хиден, чтобы он растягивался на всю оставшуюся ширину от боковой колонки. Как бы ты ещё это сделала, не зная ширину боковых колонок?

inline-block и float ничто не мешает задать ширину.

Да, но при этом контент всё равно остаётся в общем контексте(

[sigma77]

Да, на обычные блоки я вешаю clearfix , а для контента хиден, чтобы он растягивался на всю оставшуюся ширину от боковой колонки.

У меня всё наоборот. Для общей структуры clearfix. Для внутренних структур - overflow, float, inline-block.

Как бы ты ещё это сделала, не зная ширину боковых колонок?

Это сугубо частный случай. Обычно хоть одна колонка, но имеет фиксированный размер. А уж боковые колонки - чаще всего.

inline-block и float ничто не мешает задать ширину.

Да, но при этом контент всё равно остаётся в общем контексте(

Можешь показать на примере?

[psywalker]

sigma77,

У меня всё наоборот. Для общей структуры clearfix. Для внутренних структур - overflow, float, inline-block.

Да, но во внутренних тоже может быть перемещение содержимого за края)

Это сугубо частный случай. Обычно хоть одна колонка, но имеет фиксированный размер. А уж боковые колонки - чаще всего.

Согласен, но я люблю универсальность.

Можешь показать на примере?

Для тебя? Всё что угодно

[Vin]

Arinden,

Да ко мне тоже закрадывается желание отказаться от поддержки out of date браузеров. А за использование IE-6 нужно вообще уголовную ответственность вводить.

"Деньги пользователя IE6 ничем не отличаются от денег Firefox и Opera" ©. Можно поэкспериментировать: на то она и блочная вёрстка. Для IE8+ делаем display:table, а для IE6-7 обычными float'ами. В современных браузерах колонки одинаковый высоты, вид лучше, но и в старье вид вполне приемлемый. Хотя сам ещё не пробовал, но теоретически, ничто не мешает так сделать.

Ещё нашёл на Хабре: http://habrahabr.ru/qa/3443/#answer_14525

Сейчас много верстаю для западных заказчиков. Минимальные требования — IE8. В седьмом осле проверяется только функциональность, съехавшие где-то блоки уже не считаются. Когда пошла такая работа — почувствовал себя в раю.

Для отечественных заказчиков, обычно, поддержки IE7 достаточно.

[s0rr0w]

"Деньги пользователя IE6 ничем не отличаются от денег Firefox и Opera" ©.

Они гораздо дешевле, так как на один рубль пользователя IE удельная затратная часть больше.

[Arinden]

Arinden, Борь, я бы так сделал. И откажись от дурной привычки, ставить всем id!

Максим, спасибо за пример, но дело в том, что я имел ввиду, что вместо div'ов могут быть другие теги, скажем textarea, input, p, button и т.д. Вот я сделал другой пример. Я сделал резину (первая в жизни), как и ты. Хотя в примере я говорил о фикс. Вот вопрос в следующем, если мы имеем все эти теги в одном блоке, и, предположим, у всего фиксированный размер высоты и ширины - как правильно их расположить без использования флоат?

"Деньги пользователя IE6 ничем не отличаются от денег Firefox и Opera" ©. Можно поэкспериментировать: на то она и блочная вёрстка. Для IE8+ делаем display:table, а для IE6-7 обычными float'ами. В современных браузерах колонки одинаковый высоты, вид лучше, но и в старье вид вполне приемлемый. Хотя сам ещё не пробовал, но теоретически, ничто не мешает так сделать.

А чем так плох float для IE 8+?

Edited February 26, 2012 by Arinden

[psywalker]

Arinden, Нее, нее, вот это бред вообще:

.b-buttons__input {
    width: 100%;
    height: 20px;
    float: left;
}

Делай обёртку блочную, и уже её назначай нужные стили, а инпут растягивай внутри на 100%. + убери нахер флоаты уже.

Для IE8+ делаем display:table, а для IE6-7 обычными float'ами.

Да, кстати, на счёт табличных данных такое можно себе позволить.

[Arinden]

Друзья, я не могу объяснить, до чего я пытаюсь докопаться. К сожалению, я ещё не узнал ответ на свой вопрос... Давайте вернёмся к "кубикам". Я в песочнице сделал банальный пример. Три блока. Если просто создать три дива - они идут в столбик. Далее идут коричневые блоки, это то, как я их размещаю в одну линию при помощи float (то как я всегда делаю со всем абсолютно и располагаю это именно так, как мне это нужно). Ниже, фиолетовые блоки - это display: inline-block (плюса от этого я не увидел. + создаются дополнительные отступы, которые убирать нужно лишними строчками кода). И наконец, золотые блоки, это display: table-cell (не кроссбраузерно, как оказалось, и опять таки не так удобно как float). Так вот опираясь на данные примеры, делаем вывод, что от выбора типа расположения блоков зависит код вебсайта, ведь блоков у меня десятки. Вопрос, как "профессионально" размещать блоки в одну линию? каким способом? может я его вообще не указал. И вопрос сразу после этого - как разместить эти же блоки, если их не 3, а 6, и требуется, чтобы 3 было в один ряд и три в другой.

Edited February 26, 2012 by Arinden

[psywalker]

Arinden,

Вопрос, как "профессионально" размещать блоки в одну линию?

Ответ прост. Нужно смотреть на контекст, и плясать от него, а не искать один способ для всего.

[Arinden]

Ответ прост. Нужно смотреть на контекст, и плясать от него, а не искать один способ для всего.

Ясно...

Видимо это столь великая тайна, что мне не суждено её осознать. Будем пытаться.

[psywalker]

Ответ прост. Нужно смотреть на контекст, и плясать от него, а не искать один способ для всего.

Ясно...

Видимо это столь великая тайна, что мне не суждено её осознать. Будем пытаться.

Ты смотри просто, как делают sigma77 разные маньяки и учись у них. Увидел что-то, пришёл спросил, почему так и т.д.

[sigma77]

Ясно...

Видимо это столь великая тайна, что мне не суждено её осознать. Будем пытаться.

Да нет тут никакой тайны. Есть конкретная ситуация и есть n решений этой задачи, далее выбираешь наиболее оптимальный. И то таких решений может быть несколько У каждого свой подход к вёрстке. Универсальных решений тут нет.

Если будет макет, вызывающий вопрос, выкладывай, можно будет вместе обсудить.

[Arinden]

Увидел что-то, пришёл спросил, почему так и т.д.

Если будет макет, вызывающий вопрос, выкладывай, можно будет вместе обсудить.

Хорошо, спасибо!

[Arinden]

А как для блока width: 100%; можно назначить padding для текста? Cкажем есть у меня <textarea> с width: 100%; и если я применю padding: 0 5px; то будет уже 100%+10px

[sigma77]

Arinden,

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

[psywalker]

А как для блока width: 100%; можно назначить padding для текста? Cкажем есть у меня <textarea> с width: 100%; и если я применю padding: 0 5px; то будет уже 100%+10px

Запомни, что если у тя есть поля формы, то всегда оборачивай их в контейнер, и перевешивай на него бордеры, паддинги. А самим полям уже задавай 100% ширины, и никаких паддингов. Эти вещи строго контейнеру.

[Arinden]

А как для блока width: 100%; можно назначить padding для текста? Cкажем есть у меня <textarea> с width: 100%; и если я применю padding: 0 5px; то будет уже 100%+10px

Запомни, что если у тя есть поля формы, то всегда оборачивай их в контейнер, и перевешивай на него бордеры, паддинги. А самим полям уже задавай 100% ширины, и никаких паддингов. Эти вещи строго контейнеру.

Так и сделал, но в IE вообще не работает. Только с хаком. И я имею ввиду не паддинг формы, а паддинг текста внутри текстарии.

Arinden,

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

Нужно мне с этим поэкспирементировать.