CSS Center Element in 3 Column Layout - html

Question

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 relevant code in a text file: http://www.mediafire.com/?a89kr1bb4uwb4cf
Thanks in advance for the help.

Answer 1

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.

Answer 2

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>

Answer 3

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%;.

Answer 4

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.

Answer 5

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;
}