Php 3列html适合chrome浏览器，但在firefox中却一团糟

我目前正在通过项目学习php，我正在尝试实现一个三栏网站。1列是主列。其他两列设置为显示：无。当指针指向twitter或facebook图标时，它们出现在MouseOver事件上。我如何在firefox和chrome中安装这些列

这里有一个链接

//style.css
.主要部分h1{
字号：500；
字母间距：0.8px；
}
p、 h1，a{
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
颜色：rgba（255255,0.75）；
}
p{
字体大小：16px；
}
身体{
背景附件：固定；
背景位置：中心；
背景色：黑色；
背景图片：url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
//领航员
.领航员{
左边距：自动；
右边距：自动；
文本对齐：居中；
背景色：黑色；
边框：2倍纯白；
}
.标题图像{
背景尺寸：封面；
左边距：自动；
右边距：自动；
文本对齐：居中；
宽度：100%；
高度：自动；
}
/*导航项目*/
ul{
显示：无；
}
ul li：悬停>ul{
显示：块；
}
保险商实验室{
边框：1px纯黑；
字体大小：20px；
显示：块；
背景：rgba（0,0,0,1）；
背景：线性梯度（顶部，rgba（7，3，7，0.9）100%，rgba（27，30，31，0.9））；
背景：-moz线性梯度（顶部，rgba（7,3,7,0.9）100%，rgba（27,30,31,0.9））；
背景：-webkit线性梯度（顶部，rgba（7,3,7,0.9）100%，rgba（27,30,31,0.9））；
盒影：0px 0px 9px rgba（0,0,0,0.15）；
填充：2px；
边界半径：5px；
列表样式：无；
位置：相对位置；
显示：内联表；
}
ul：之后{
内容：“；
明确：两者皆有；
显示：块；
}
ulli{
显示：块；
浮动：左；
}
ulli：悬停{
边界半径：10px；
背景：rgba（95,0,0,0.4）；
背景：线性梯度（顶部，rgba（0,0,0,0.4）0%，rgba（95,0,0,0.4）45%）；
背景：-moz线性梯度（顶部，rgba（0,0,0,0.4）0%，rgba（95,0,0,0.4）45%）；
背景：-webkit线性梯度（顶部，rgba（0,0,0,0.4）0%，rgba（95,0,0,0.4）45%）；
}
ul li：悬停a{
颜色：rgba（255，255，255，1）；
}
ullia{
显示：块；
填充：10px 15px；
颜色：白色；
文字装饰：无；
}
.社交媒体{
填充：0px；
左：3倍；
右侧填充：3px；
填充顶部：4.7px；
垫底：4.7px；
}
/*内容部分*/
.身体部位{
左边距：自动；
右边距：自动；
文本对齐：居中；
边际上限：0px；
宽度：1200；
最小高度：800px；
边界半径：5px；
}
.集装箱{
浮动：左；
位置：相对位置；
文本对齐：居中；
显示：内联块；
利润上限：-20px；
宽度：800px；
最小高度：800px；
背景色：rgba（0,0,0,0.6）；
填充：0；
//边界半径：10px；
}
#边栏{
位置：相对位置；
浮动：对；
宽度：200px；
显示：无；
垂直对齐：顶部；
}
#侧边栏{
位置：相对位置；
浮动：左；
宽度：200px；
垂直对齐：顶部；
}
.侧栏{
显示：内联块；
位置：相对位置；
最小高度：50px；
垂直对齐：顶部；
}
.主要部分{
显示：内联块；
填充顶部：10px；
宽度：780px；
最小高度：800px；
保证金：自动；
垫底：10px；
}
.主要部分{
宽度：自动；
背景色：rgba（150150,0.36）；
边框：1px纯黑；
//边界半径：20px；
填充：15px；
左边距：自动；
右边距：自动；
边缘底部：20px；
盒影：8px 8px 5px#000000；
}
.主要部分分部{
//最大高度：600px；
最大宽度：800px；
}
.主要部分h1{
填充：10px；
}
.主要部分p{
填充：10px；
}
#facebook部门{
背景色：#ffffff；
显示：无；
}
//index.php

以下几点可能会有所帮助：

• 从现在起，您的
  标签就在
  标签内。特别是在使用模板时，检查生成的html代码非常重要。看看这个：

• 在侧栏上尝试

  位置：绝对

  。如果你给他们的父母一个

  位置：相对的
  ，你应该能够用
  顶部的
  ，
  左侧的
  和
  右侧的
  样式属性将他们准确地放在你想要的地方
  

---

它正在处理我的资源（1920x1080）是的，但是我如何根据其他屏幕分辨率调整它们的位置？您对CSS有多熟悉？复习一下职位的基本知识可能会有所帮助。这是一个很好的起点。看来我用reordering index.php和您建议的源代码中的信息修复了它。

     //style.css

    .main-part h1{
    font-weight: 500; 
    letter-spacing: 0.8px;
}

p, h1, a{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: rgba(255,255,255,0.75);  
}
p{
    font-size: 16px;
}

body{
    background-attachment: fixed;
    background-position: center;
    background-color: black;
    background-image: url(http://www.slavesofdestiny.com/imgs/sodarkaplan.jpg);
}
// navigator
.navigator{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: black;
    border: 2px solid white;
}
.header-image{
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    height: auto;
}

/* Navigation Items */

ul ul {
    display: none;
}

ul li:hover > ul {
    display: block;
}
ul {
    border: 1px solid black;
    font-size: 20px;
    display: block;
    background: rgba(0,0,0,1); 
    background: linear-gradient(top,  rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9));  
    background: -moz-linear-gradient(top,  rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9)); 
    background: -webkit-linear-gradient(top,  rgba(7, 3, 7, 0.9) 100%, rgba(27, 30, 31, 0.9)); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 2px;
    border-radius: 5px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
ul:after {
    content: ""; 
    clear: both; 
    display: block;
}
ul li {
    display: block;
    float: left;
}
ul li:hover {
    border-radius: 10px;
    background: rgba(95, 0, 0, 0.4);
    background: linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
    background: -moz-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
    background: -webkit-linear-gradient(top, rgba(0,0,0, 0.4) 0%, rgba(95, 0, 0, 0.4) 45%);
}
ul li:hover a {
    color: rgba(255, 255, 255, 1); 
}

ul li a {
    display: block; 
    padding: 10px 15px;
    color: white; 
    text-decoration: none;
}

.social-media{
    padding: 0px;
    padding-left: 3px;
    padding-right: 3px; 
    padding-top: 4.7px; 
    padding-bottom: 4.7px;
}

/*Content Part*/
.body-part{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 0px;
    width: 1200;
    min-height: 800px;
    border-radius: 5px; 
}

.container{
    float: left;
    position: relative;
    text-align: center;
    display: inline-block;
    margin-top: -20px;
    width: 800px;
    min-height: 800px;
    background-color: rgba(0,0,0,0.6);
    padding: 0;
    //border-radius: 10px; 
}

#sideBarRight{
    position: relative;
    float: right;
    width: 200px;
    display: none;
    vertical-align: top;
}

#sideBarLeft{
    position: relative;
    float: left; 
    width: 200px;
    vertical-align: top;
}

.side-bar{
    display: inline-block;
    position: relative;
    min-height: 50px;
    vertical-align: top;
}

.main-part{
    display: inline-block;
    padding-top: 10px; 
    width: 780px;
    min-height: 800px;
    margin: auto; 
    padding-bottom: 10px;
}

.main-part div{
    width: auto;
    background-color:rgba(150,150,150,0.36);
    border: 1px solid black;
    //border-radius: 20px;
    padding: 15px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 8px 8px 5px #000000;
}

.main-part div img{
    //max-height: 600px;
    max-width: 800px;
}

.main-part h1{
    padding: 10px;
}
.main-part p{
    padding: 10px;
}

#facebook-div{
    background-color: #ffffff;
    display: none;
}


     //index.php

    <?php

?>
<body>
    <div class="navigator">
        <?php include 'header.php'; ?>
    </div>
    <div class="body-part" >
        <div id="sideBarLeft" class="side-bar" style="float: left;">
            <div id="facebook-div" style="float: left;">
                <?php include 'leftSideBar.php'; ?>
            </div>
        </div>
        <div class="container" onmouseover="document.getElementById('sideBarRight').style.display = 'none'; document.getElementById('facebook-div').style.display = 'none';">
            <div class="main-part">
               <?php include 'postSelect.php' ?>
            </div>
                <?php include 'footer.php';?>
        </div>
        <div id="sideBarRight" class="side-bar">
            <?php include 'sidebar.php';?>  
        </div>

    </div><!--end body-part-->
</body>