在使用静态导航时,如何使div保持居中

时间:2013-02-21 09:07:24

标签: html css

当我在screenfly上恢复窗口或测试屏幕分辨率时。

我的html5播放器所在的内容隐藏在导航中。

这是网站 http://djwckd.com/

CSS

    #sidenav {
        background-image:url('http://i1285.photobucket.com/albums/a592/djwckd/wckd-bg2_zps36505f8f.jpg');
        width: 225px;
        position: fixed; /*--Fix the sidenav to stay in one spot--*/
        float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
        text-align:center;
        height: 100%;   
    }

#content {
    background-image:url('http://i1285.photobucket.com/albums/a592/djwckd/wckd-bg1_zpsf32da4c1.jpg');
    float: right; /*--Keeps content to the right side--*/
    width:85%;
    text-align: center;
    font-family:Trebuchet MS;
    color: #000;
    height: 100%;

}

.bottom {
    background-image:url('http://i1285.photobucket.com/albums/a592/djwckd/wckd-bg3_zps849e973b.png');
    font-family:Trebuchet MS;
    width:400px;
    margin:0 auto 0 auto;
    padding:5px;
    border:1px solid #cccccc;
    font-size:12px;
    color: #777777;
}

.copy {
    background-color: #fff;
    color: #000;
    font-family:Trebuchet MS;
    font-size:14px;
    height: 100%;

}

1 个答案:

答案 0 :(得分:0)

min-width添加到侧边栏和内容的容器中可以解决问题,但会在宽度小于指定最小宽度的浏览器上添加滚动条。

div.container { min-width:1024px; }

这可以防止容器小于1024px。