CSS Center element in 3 column layouts

So, I have a 3-column layout on my webpage, but I can't get things to center in the middle column. The columns on the left and right have a fixed width, so I created a container for the middle column and set its borders equal to the size of the left and right columns. Then I used the margin: auto property in the div tag inside the middle container, which has everything I want in the middle column. If possible, I want this to work in all sizes of the browser window. 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 cannot publish html without rendering the browser for some reason, I loaded the appropriate code into a text file: http://www.mediafire.com/?a89kr1bb4uwb4cf

Thanks in advance for your help.

+3
5

, , #middle, text-align: left, text-align: center. , , .

, p, div, blockquote, , . , , , . , , CSS. , center, CSS.

, , :

#center {
  margin: auto;
}

#center .

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

center, :

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

, . .

+1

. 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>
+1

, text-align:left text-align:center #middle

margin:0 auto #middle ( margin:auto, ), , - width:400px; width:20%;.

0

,

#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 */
}

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

, .

P.S. , html .

0

, , , , , div?

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

Source: https://habr.com/ru/post/1778773/


All Articles