Центрирование два прозрачных столбцов с помощью 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

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

Несколько хороших рамок являются:

• YUI Grids
• Blueprint CSS
• Blocks (new experimental)

Answer 3

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

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

Answer 4

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

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

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