Лучший способ реализовать сайт с тремя столбцами, используя теги <DIV>?

Я разрабатываю сайт с тремя колонками, используя такой макет:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Но, учитывая свойство CSS по умолчанию CSS <DIV>'s, является "static", мой <DIV>'s был показан один ниже другого, как и ожидалось.

Итак, я установил свойство "свойство" CSS как "относительное" и изменил свойство "top" в "middle" и "right" <DIV>'s на - (минус) на высоту предыдущего <DIV>. Он работал отлично, но этот подход привел к двум проблемам:

1) Несмотря на то, что Internet Explorer 7 показывает три столбца должным образом, он по-прежнему сохраняет вертикальную полосу прокрутки, как если бы <DIV>'s располагались один под другим, и после завершения содержимого было много свободного места. Я бы этого хотел.

2) Высота этих элементов является переменной, поэтому я не знаю, какое значение установить для каждого свойства <DIV> 'top'; и я бы не хотел его жестко кодировать.

Итак, мой вопрос: какой лучший (простой + элегантный) способ реализовать этот макет? Я хотел бы избегать абсолютного позиционирования, и я также должен сохранять свой дизайн безрезультатным.

Ответ 1

Если вы еще не проверили A List Apart, вы должны, так как в нем содержатся отличные уроки и рекомендации по дизайну веб-сайта.

Эта статья в частности должна помочь вам.

Ответ 2

Дайте BluePrint CSS. На самом деле очень просто начать работу, но достаточно мощный для большинства приложений.

Легко понять учебники и примеры. Имеет библиотеку типографики, которая дает достойные результаты прямо из коробки.

Ответ 3

На сегодняшний день самым простым способом, который я нашел, чтобы сделать 3 столбца (или любое другое количество столбцов, разделенных на доступное пространство странными способами), YUI Сетки. Существует YUI Grids Builder, чтобы дать вам базовый макет. Следующее даст вам базовый 3-х столбцовый макет шириной 750 пикселей (разделение 1/3 1/3 1/3) с левой боковой панелью размером 160 пикселей. Изменение его на другие ширины, конфигурации боковой панели и разделение столбцов очень просто.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Ответ 4

Существует несколько примеров и библиотек, в которых вы можете выполнить поиск - уже указанная пара (A List Apart - обязательное чтение).

Я использовал библиотеку пользовательского интерфейса Yahoo (YUI) на моих последних сайтах и очень понравился. Yahoo полностью поддерживает его, и это быстро понять и использовать. Здесь CSS for Grids, который позволяет вам отформатировать вашу страницу на столько столбцов и разделов, сколько захотите.

YUI хорош, потому что вам не нужно изобретать колесо для основания вашего сайта, и они делают все, чтобы убедиться, что их фонды работают во всех браузерах. И, самое главное, это бесплатно.

Ответ 5

Мне нравится 960 Grid System. Это легкий, простой в использовании css, который делит экран на 12 (или 16) столбцов. Вы можете использовать его для дизайна из 3 столбцов и соответствующим образом выровнять остальную часть вашего контента.

Ответ 6

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

Ответ 7

Для фиксированного coloumn просто установите высоту: xxxpx сделает их равными.

Используйте этот 3 генератор макета столбца, чтобы попробовать.

Ответ 8

Этот код работает на моем компьютере с IE 8, Chrome, Firefox.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

Ответ 9

Во-первых, относительное позиционирование делает то, что вы описали: он резервирует место в исходном местоположении, но отображает смещение DIV на некоторую величину.

Если вы плаваете DIV, то они будут складываться слева направо, но это может вызвать проблемы.

Разметка с тремя колонками с использованием CSS довольно сложна. Взгляните на [http://www.glish.com/css/7.asp]