Не работает align="left" в Firefox

[D.iK.iJ]

Мучаюсь с версткой. Если сделать вот так:

PHP код:

<table align="left" width="300" height="100" border="1"><tr><td>
1
</td></tr></table>

<center><table border="1"><tr><td>
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 
</td></tr></table></center> 


То во всех браузерах (вроде) получим 2 колонки рядом. Но только в фаерфоксе при уменьшении экрана вторая колонка не уходит под первую

Если обе таблицы с align="left" то работает в Фаерфоксе, но в Хроме таблицы сразу друг под другом.

Если что, то это для адаптивности сайта нужно.

[21raul]

Не совсем понял - что нужно...

PHP код:

<table style="float:left; width:300px; height:100px; border:1px solid Black";><tr><td> 
1 
</td></tr></table> 

<table style="float:left; width:calc(100% - 310px);  border:1px solid Black"><tr><td> 
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2  
</td></tr></table> 


не ?
(+ max-width, min-width...)

[D.iK.iJ]

Нужно:
1) Фиксированная левая колонка, допустим, 200 пикселей
2) Правая резиновая - на всю ширину.
3) чтобы при уменьшении размера экрана одна колонка уходила под другую

Главное - чтобы работало и в Фаерфоксе и в Хроме.

Добавлено через 13 минут
P.S. Да, http://htmlbook.ru/css/calc - штука офигенная. Не знал.
По идее, оно поможет, только не на 100% кроссбраузерно

[21raul]

Сообщение от D.iK.iJ

Нужно:
...

п.п. 1 и 2 работают,
п.3 - установите для table2 min-width меньше которого уходит вниз...

Главное - чтобы работало и в Фаерфоксе и в Хроме

работает

[D.iK.iJ]

Спасибо
Узнал для себя новую полезную функцию. Буду использовать.

А для адаптивного макета решил пока добавлять ко 2 таблице float: left; при уменьшении размера экрана - чтобы таблица нормально переносилась под меню.

Добавлено через 21 час 52 минуты
Офигеть. Я случайно нашел решение. Достаточно добавить style="display: block;" к 1 и ко 2 таблице!


Больше ничего не нужно. На удивление, даже 3 колоночный макет вполне адекватно отобразился.

[21raul]

да, но и в этом случае, если не указать width (max-width) для второй (третьей),
то при наличии объемного контента
они практически всегда будет под первой (второй)...

[D.iK.iJ]

Фаерфокс вообще какой-то ****

[ahsinis]

а не правильнее ли сделать классическую двухколоночную блочную верстку (на дивах) и в блоки уже таблицы разместить?

[21raul]

Сообщение от ahsinis

а не правильнее ли

Это как-то решит проблему?
тем более с этим кодом таблицы и работают как блоки (display:block)...

[D.iK.iJ]

Я частично решил проблему тем, что при ширине экрана в 500px и ниже добавляю обоим колонкам (таблицам) float:left и разворачиваю их на 99% по ширине.

Фаерфокс и Хром при этом одинаково переносят контент под меню.

Кстати, с блоками-таки (display:block) в Фаерфоксе еще один косяк:

<table width="50%" style="display: inline-block; min-width: 200px;" CellSpacing="0" CellPadding="0" border="1"><tr><td valign="middle" align="right">
111
</td></tr></table>

Ширина таблицы будет 50%, а ячейки - 0.