как отцентрировать содержимое DIV по высоте (форму поиска)

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

как отцентрировать содержимое DIV по высоте (форму поиска)

всем привет.
вот такая загвоздка. есть типа табличка из двух столбцов. ширина 100%. в левом столбце много текста и он вытягивается вниз. а в правом столбце форма поиска. нужно отцентрировать по вертикали и по горизонтали эту форму поиска. проблема в том, что это все в ДИВах. и что-то все, что я по этому поводу нашел в инете, работать не желает. форма поиска упорно стоит вверху и хоть удавись. что я не так делаю? причем фиксированной высоты у столбцов нет. они должны быть "резиновые". хелп :)

HTML код:

<div style="background-color:#BAD0DD; margin-left:100px; font-family:Calibri; display:table;">

<div style="background-color: #0F6; width:36%; float: right; display:table-cell; vertical-align:middle;">



<p>                     

<input type="text" name="q" size="30" />&nbsp;<input type="submit" value="Найти" />

</p> 

    </div>

   <div style="background-color:#e3eeff; margin-left:-100px; margin-right:36%; padding:20px;">Адыгея Алтайский край Амурская обл. Архангельская обл. Астраханская обл.Башкортостан Белгородская обл. Брянская обл. Бурятия Владимирская обл.Волгоградская обл. Вологодская обл. Воронежская обл. ДагестанИвановская обл. Ингушетия Иркутская обл. Кабардино-Балкария Калининградская обл. Калмыкия Калужская обл. Камчатская обл. Карачаево-Черкесия КарелияКемеровская обл. Кировская обл. Коми Костромская обл. Краснодарский край Красноярский край Курганская обл. Курская обл. Ленинградская обл.Липецкая обл. </div>



</div>

я бы так сделал

HTML код:

<div style="background-color:#BAD0DD;font-family:Calibri; display:table;">

    <div style="background-color:#e3eeff;display:table-cell;">

    Адыгея Алтайский край Амурская обл. Архангельская обл. 

    Астраханская обл.Башкортостан Белгородская обл. Брянская обл. 

    Бурятия Владимирская обл.Волгоградская обл. Вологодская обл. 

    Воронежская обл. ДагестанИвановская обл. Ингушетия Иркутская 

    обл. Кабардино-Балкария Калининградская обл. Калмыкия 

    Калужская обл. Камчатская обл. 

    Карачаево-Черкесия КарелияКемеровская обл. Кировская обл.

    Коми Костромская обл. Краснодарский край Красноярский край

    Курганская обл. Курская обл. Ленинградская обл. Липецкая обл.

    </div>

    <div style="background-color:#0F6; display:table-cell; vertical-align:middle; width:40%;">



                     

        <input type="text" name="q" size="30" /> <input type="submit" value="Найти" />



    </div>

</div>

мб беспонтово, но вроде бы работает... :)

спасибо работает, но есть одно большое но :) table-cell в IE как вы знаете ведут себя отвратно :) пробовал вникнуть в хаки ксс, но везде описаны примеры с одной ячейкой. с двумя ячейками дело обстоит плохо (у меня). что делать? :)

Цитата:

Цитата koresaram

table-cell в IE как вы знаете ведут себя отвратно »

там и float тоже так не работает... (
table рулит )

для ie7-- можно применить expression в CSS.

Цитата:

Цитата Sham

там и float тоже так не работает... (
table рулит )
для ie7-- можно применить expression в CSS. »

float хоть что-то дает :)
про експрессион я читал, но не въехал ибо с джава скриптами у меня плохо совсем. везде описываются примеры на одну ячейку только и как бы в отрыве от таблицы. а в таблицу с двумя столбцами у меня эти експрессионы вбубенить не выходит никак.

народ, помогайте, я чет ваще туплю где-то или чсего-то недопонимаю. надо вобщем сверстать вот такое, но в дивах

Код:

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">

  <tr>

    <td width="70%">1<p>2</p>

    <p>3</td>

    <td width="30%">

    <p align="center">

    <input type="text" name="q" size="30" />     

<input type="submit" value="Найти" />

    </td>

  </tr>

</table>

покопавшись в инете я нашел несколько способов вертикального центрирования в дивах, но все примеры рассматривались для одного, отдельно стоящего блока. а ля <div>тут текст который центрировать</div>. проблема в том, что если таких ячейки две (причем высота и ширина не фиксированная в пикселях, а резиновая), то все описанные способы работать у меня отказываются. либо центрируется то что надо, но при этом табличка разлетается. либо табличка на месте но не центрируется ничего либо еще варианты. собственно хелп кто-нибудь :)

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