Какой самый лучший 3-х колоночный CSS-макет с шириной 100% ширины?

Мы начинаем новый проект, и нам нужна 100% ширина (100% высота это бонус:)), 3 колонки, чистый CSS макет для бизнес- RIA.

Мы проверили YAML, YUI, Blueprint и пару других, но кажется, что никто не предлагает и не гарантирует 100% совместимость со всеми основными браузерами.

Какой из них лучший для этой цели из вашего опыта?

Заранее спасибо.

Источник

2 ответа

Решение

Несомненно, вы уже видели это, но на своем веб-сайте A List Apart Мэтью Левин не только предоставляет Святой Грааль из трех колонок, но и объясняет, как это работает, во всех деталях.

Источник

Примерно так должно работать в большинстве браузеров IIRC. Однако вам понадобится какой-то javascript, если вы хотите использовать колонтитулы, если вы не используете поддельные столбцы. Для RIA я думаю, что это приемлемо.

Лично я никогда не использую CSS-фреймворки.

Пример ниже также должен работать в IE6:

  <html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
      <style type="text/css">
       html, body { height:100%; }

         .left { 
           width:200px;
           display:inline;
           float:left;
           background:blue;
           height:100%;
         }    

         .right { 
           width:200px;
           display:inline;
           float:right;
           background:red;
           height:100%;
         }

         .center {
           margin:0 200px;
           height:100%;
         }
     </style>
   </head>
   <body>
      <div class="right">test</div>
      <div class="left">test</div>
      <div class="center">test</div>
   </body>
</html>
Источник
Другие вопросы по тегам