CSS Center Element in 3 Column Layout

So I have a 3-column layout on my webpage, but I can't get the things in the middle column to be centered. The columns on the left and right are of fixed width, so I created a container for the middle column and set its borders to equal the size of the left and right columns. Then, I used the margin:auto property on the div tag inside the middle container that has everything that I want in the middle column. If possible, I want this to work on all browser window sizes. This is my CSS:

#top
{
    width:100%;
    background-color:#FF0000;
    height:30px;
    overflow: auto;
    width: 100%

}


#right
{
    float:right;
    width:100px;
    background-color:#CCC;
    height:100%;
}

#middleCont
{
    margin-left:150px;
    margin-right:100px;
}

#middle
{
    margin:auto;
    text-align:left;    
}


#left
{
    float:left;
    width:150px;
    height:100%;


}

And since I can't post html without the browser rendering it for some reason, I uploaded the releva开发者_JS百科nt code in a text file: http://www.mediafire.com/?a89kr1bb4uwb4cf

Thanks in advance for the help.

Yes, for one, under #middle, you said text-align: left rather than text-align: center. The instant I changed this, it worked fine.

I inserted different types of tags into the document, including p, div, blockquote, a list, a table, and an image. The only problem I noticed is that the table did not center. Looking at a number of articles, I found that you had already implemented the recommended way of centering a table in CSS. I think that maybe, the only solution to this problem is either to make a table using the center tag or create a new block of text in your CSS file.

You can do what you like, but the recommended way is this:

#center {
  margin: auto;
}

Then make a new table with #center as its ID.

<table id="center">
  ...
</table>

If you choose to use the center tag, you implement it like this:

<center>
  <table>
    ...
  </table>
</center>

Hope I helped a little. Good luck.

I do it this way. Working even for internet explorer 6.

 <table border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;">
    <tr>
        <td width="50%" valign="top" style="width:50.0%;">

        </td>
        <td valign="top" style="width:900px;">
            <div style="width:900px; border:1px solid white;"></div>
        </td>
        <td width="50%" valign="top" style="width:50.0%;">

        </td>
    </tr>
</table>

I suppose you can change the text-align:left to text-align:center for the selector #middle

If you want to use the method margin:0 auto for the #middle (and not margin:auto as you have it) then you have to set a fixed width, something like width:400px; or width:20%;.

If you want a fixed width center column then

#middle 
/*this will keep the column width constant wile letting the space on either side expand*/
{
    margin:auto;
    text-align:left;
    width: 600px; /* what ever width you want */
}

or specify fixed margins

#middle
/*this wil keep the space on either side constant wile letting the column expand*/
{
    margin-left: 150px; /*to center column just keep the left and right margins equal*/
    margin-right: 150px;
    text-align:left;
}

I hope that answers your question.

P.S. It would have helped if you had posted the html too.

I am not sure if I follow exactly what you are trying to do - but what about if you use percentages rather than pixels for the width of all four divs?

#top
{
    width:100%;
    background-color:#FF0000;
    height:30px;
    overflow: auto;
    width: 100% 
}


#right
{
    float:right;
    width:25%;
    background-color:#CCC;
    height:100%;
}

#middleCont
{
    margin-left:36%;
    margin-right:26%;
}

#middle
{
    margin:auto;
    text-align:left;    
}


#left
{
    float:left;
    width:35%;
    height:100%;
    background-color:#CCC; 
}