Центрирование двух прозрачных столбцов с помощью CSS

Question

Итак, прямо к делу, вот что я хочу (минус плохое качество) ...

http://www.hbperspective.com/alt3/site.jpg

А вот что у меня есть ...

http://www.hbperspective.com/alt3/

Я пытаюсь расположить эти две прозрачные колонки по центру, как они есть на картинке. С этим макетом CSS у меня чертовски много времени выясняется, как это сделать, не вызывая всевозможных других проблем. Вот мой стиль ...

* {
    padding: 0;
    margin: 0;
}

body {
    background: #000000 url('background_div.png') repeat-y center top;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0 auto;
}

#wrapper {
    background: url('background_header_transparent.png') no-repeat center top;
    width: 100%;
    display: table;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.container {
    float: left;
    position: relative;
    margin-top: 100px;
}

.content {
    position: relative;
    float: left;
}

#contentColumn{
    width: 540px;
}

#sidebarColumn {
    width: 190px;
    margin-left: 20px;
    float: left;
    display: inline;
}

#contentColumn .content {
    width: 500px;
    padding: 10px;
}

#sidebarColumn .content {
    width: 170px;
    padding: 10px;
}

* html #contentColumn .overlay { height: expression(document.getElementById("contentColumn").offsetHeight); }
* html #sidebarColumn .overlay { height: expression(document.getElementById("sidebarColumn").offsetHeight); }

Разметка довольно проста, вероятно, будет проще взглянуть на нее по предоставленной ссылке. Итак, как я уже сказал, я не совсем уверен, что нужно делать, чтобы все заработало так, как я хочу. Есть идеи?

Answer 1

div#container {
  width:500px; /* Same width as both columns */
  margin:auto; /* Will center the container */
}
  div#col1 {
    float:left; /* allows side-by-side columns */
    width:250px;
  }
  div#col2 {
    float:left;
    width:250px;
  }
div.clear {
  clear:both; /* Stops columns from extending past border of container */
}

<div id="container">
  <div id="col1"></div>
  <div id="col2"></div>
  <div class="clear"></div>
</div>

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

Answer 2

У меня он работает на вашем сайте в FF3 и IE7 с использованием

div#wrapper { 
    width:800px; 
    margin: auto; 
}
div#contentColumn 
{ 
    margin-left: 20px;
} 

Если вы хотите исправить логотип (см. Вверху справа), добавьте дополнительный контейнер div непосредственно внутри обертки и примените вышеуказанную ширину / поле к контейнеру (как предложено Джонатаном Сэмпсоном.)

Answer 3

Правила центрирования вещей в CSS:

1. Вещи, которые вы центрируете, должны иметь ширину
2. Поля в этом блоке должны быть назначены автоматически

Answer 4

Существует так много ошибок при создании CSS-столбцов, что я бы предложил использовать фреймворк, а не свой собственный. Есть множество ошибок, которые являются ответчиками браузера, и которые вы можете не увидеть, если не проверите в IE, FF, Safari, Opera и т. Д.

Несколько хороших фреймворков:

• Сетки YUI
• Чертеж CSS
• Блоки (новые экспериментальные)