2 блока рядом, один фиксированный, другой в % или проблема с "calc"

[volkoff]

 

Значится, такая задача:

 

Есть блок wrapper (черная рамка) - с margin 0 и max-width.

Синий блок - задан жестко в пикселях.  (допустим 100px)

Красный  задан :

width: calc(100% - 100px);

У синего - float right

У красного - float left

В итоге получается то, что нужно: при сжимании окна по горизонтали, синий блок остается как есть, а уменьшается только красный. Все супер.

 

=====

 

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

Как оказалось, сафари игнорит width со свойством calc и попросту делает красный блок, шириной с контент, который в нем есть.

 

 

=====

 

Вопрос: как можно такое же точно поведение реализовать, без свойства calc ???

 

 

Спасибо

[Galaxy]

http://jsfiddle.net/qar0ymdn/   

http://jsfiddle.net/qar0ymdn/1/

Edited January 14, 2015 by Galaxy

[satantx]

http://csstemplater.com/

[volkoff]

http://jsfiddle.net/qar0ymdn/

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

 

(для лучшего понимания - там менюшка, которую сжимать никак нельзя)

[Great Rash]

http://codepen.io/GreatRash/pen/bNqWXL

[volkoff]

 все норм.

 

 

белый блок получается по центру красного, а не по центру обертки

 

 

http://jsfiddle.net/qar0ymdn/2/

 

 

 

Блин, чуваки, спасибо !!!

Уже начинал костыли лепить

Edited January 14, 2015 by volkoff