Centering two transparent columns using CSS

Question

So, right to the point, here's what I want (minus the poor quality)...

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

And here's what I've got...

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

I'm trying to get those two transparent columns to be centered as they are in the pic. With this CSS layout I'm having a heck of a time figuring out how to do that without causing all kinds of other problems. Here is my styling...

* {
    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); }

The markup is pretty simple, probably be just easier to look at it from the link provided. So, like I said I'm not really sure what to do at this point to get it working the way I want. Any ideas?

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>

And for extra credit, avoid using expressions :) Instead, perform any needed logic like that with javascript, via a framework like jQuery.

Answer 2

There are so many gotchas creating CSS columns I would suggest using a framework instead of rolling your own. There are lots of gotchas which are browser defendant and that you may not see unless you check in IE, FF, Safari, Opera, etc.

A few good frameworks are:

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

Answer 3

Rules for centering things in CSS:

1. The thing you're centering must be assigned a width
2. The margins on that block must be assigned to auto

Answer 4

I have it working on your site in FF3 and IE7 using

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

If you want to fix up the logo (see top right) then add an extra container div immediately inside the wrapper, and apply the above width/margin to the container (as suggested by Jonathan Sampson.)