Этот пост описывает технику CSS для отображения некой строки элементов, видимых при открытии полного окна, и исчезающих слева, при уменьшении ширины окна браузера. Таким вот образом:

A — некая левая панель, B — правая, C — содержимое, div, который должен отображаться полностью справа, и скрываться слева, при схлопывании (уменьшении ширины) окна.

На самом деле, когда я начал писать этот пост, я ещё не был уверен, насколько легко у меня получится реализация задачи. Оказалось что всё в высшей степени просто. Нужно лишь обернуть «содержимое» дивом float:right.

<table border="1" cellspacing="0" cellpadding="16" width="100%" style="table-layout:fixed">
  <tr>
    <td><img src="/images/dot.gif" width=250 height=1 /></td> <!--A-->
    <td> <!--B-->
      <div style="float: right;«>
        <div>Содержимое (C) со всем дизайном содержимого</div> <!--C-->
       </div>
    </td>
  </tr>
</table>

Ok, оказалось что это хоть и работает в FireFox, Opera, Chrome, но в Internet Explorer’e никак не хочет выравниваться вправо. Пришлось повозиться ещё минут 10, добавив дополнительный «обманный» <div>, который меняет направление текста «справа-налево» (direction: rtl), но возвращается к «слева-направо» внутри. А ещё, указать ширину блока 100%.

Получилось так:

<table border="1" cellspacing="0" cellpadding="16" width="100%" style="table-layout:fixed">
  <tr>
    <td><img src="/images/dot.gif" width=250 height=1 /></td> <!--A-->
    <td> <!--B-->
      <div style="direction:rtl; width: 100%; overflow:hidden;«>
        <div style="float: right; direction:ltr;«>
           <div>Содержимое (C) со всем дизайном содержимого</div> <!--C-->
       </div>
     </div>
    </td>
  </tr>
</table>

Теперь работает на всех браузерах оказавшихся под рукой.:)

————————————

Похожие статьи:

  – Исправляем баг с overflow:hidden и table-layout для Opera (https://favor.com.ua/en/blogs/3239.html)
  – Решение проблемы вёрстки поля input с шириной 100% внутри таблицы шириной 100% (https://favor.com.ua/en/blogs/1968.html) 

————————————

This document has been copied from FAVOR.com.ua (https://favor.com.ua/en/blogs/3461.html).
All rights reserved by author of the material. In case of re-publication, the link to the source of the material is strongly required!
Document date: January 9, 2011