Question

Suppose I have table with two columns. I can center this table by using:

margin: auto

But let’s say I want second column to appear in the center. How do I do that?
Is it possible?

Edited:

Here is what I want to achieve:

-------------------------------------------------------
|                                                     |
|     ----------------------------------              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     ----------------------------------              |
|                                                     |
|                                                     |
-------------------------------------------------------

Second column is in the center of page/div. If this is impossible with tables how to do it with divs?

Answer 1

Well you can, although I have to warn you there are several problems with a layout like this. Be sure to understand them before using this.

The HTML required is:

<div id="container">
    <div id="inside">
        <div id="offside">
        </div>
        <div id="center">
        </div>
    </div>
</div>

There are two layers of wrappers here. We using the usual margin: 0 auto technique with the outside container to center it, while the inside div gets a negative left margin equal to the width of the off-center div.

#container {
    width: 300px;
    margin: 0 auto;
}

#container #inside {
    margin-left: -100px;
    overflow: hidden;
}

#container #inside div {
    float: left;
    height: 400px;
}

#container #inside #offside {
    width: 100px;
    background-color: #ddd;
}

#container #inside #center {
    width: 300px;
    background-color: #f9f9f9;
}

Have a look at it here: http://www.jsfiddle.net/DfArr/1/