inline-block и float

[Zverushka]

http://jsfiddle.net/Chcg3/1/

вот такая ситуация. Желтая кнопка должна быть на новой строке по центру, а она все равно участвует в обтекании, не смотря на отмену его (видимо свойства текста?).

В общем вопрос почему так и как реализовать подобную верстку тогда, если не получается отменить обтекание (без лишнего элемента .clear в разметке).

Желтая кнопка по ширине должна зависеть от контента (для этого идеально подходит Inline-block или float), ну а красная должна быть справа. Видимо требуется экстра-разметка?

 

[Z1gnet]

ну естественно что желтая кнопка поднимается вверх. и дело тут не в отмене обтекания, а в том что кнопка видит свободное пространство сверху и туда становиться (как если бы красный блок был инлайн-блочный). просто оберните красный блок в див  и дайте ему overflow:hidden.  Либо желтую кнопочку оберните в див и дайте ей clear:both, ну или либо как вы написали про див clear.

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

Edited December 8, 2013 by Z1gnet

[SelenIT]

'clear'

   ...

   Applies to: block-level elements

 

9.2.2 Inline-level elements and inline boxes

 

... The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

 

В принципе, существует одно значение display, при котором элемент ужимается по контенту, не теряя блочного типа форматирования. Допустимо ли оно в вашем случае — решайте сами

[Zverushka]

В принципе, существует одно значение display, при котором элемент ужимается по контенту, не теряя блочного типа форматирования. Допустимо ли оно в вашем случае — решайте сами

По идее очень хороший способ (ведь какая разница, что написано в css, если html структура не затрагивается).Нет ли каких-то проблем с кроссбраузерностью? Я таблиц как огня боюсь - у каждого браузера свое мнение, как правильно их отображать.

А сам бы ты поступил как - сдела как в твоем примере или обернул лишней оберткой? 

[SelenIT]

Имхо, зависит от ситуации. Если правый блок и кнопка относятся к разным логическим блокам, пожалуй, предпочел бы обертку, если желтая кнопка — именно кнопка button, то тоже (т.к. нельзя просто взять и поменять display у button на что попало). Но вообще, по-моему, у одноячеечной псевдотаблицы без border-ов и padding-ов фатальных межбраузерных разногласий возникать не должно, так что панически бояться их не стоит.