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.