CSS两列的全部宽度(CSS two column full width)

所以，我有一个网站，其中有一个页眉，页脚和两个主要内容列其间。

左边一栏是用于导航。 正确的是地图。 我想既填补了浏览器的宽度。 我似乎面临着不同的分辨率和不同的浏览器问题。 地图始终置换到页脚低于或离开右侧的空白。

我的链接： http://www.trashvigil.com/nsdf/www/index1.php

这是我的代码：

    #map{
    float:left;
    height:572px;
    width:79.88%;
            border-right: 2px solid #000;
            border-bottom: 3px solid #000;
    }

            #leftnav
    {
    float:left;
    width:250px;
    height: 572px;  
            border-right: 3px solid #000;
            border-bottom: 3px solid #000;
             }

#map是地图容器。 #Leftnav是导航。

谢谢，

考希克

Answer 1:

你需要的东西是这样的：

#map {
    margin-left:250px;    
    height:572px;
}
#leftnav {
    float:left;
    width:250px;
    height: 572px;  
}

我们的想法是浮动leftnav然后设置一个左边距的映射等于leftnav的宽度。

你可以看到它住在这里： http://dabblet.com/gist/2767788

Answer 2:

#nav {
position:absolute; 
left:0px; width:250px;
height:375px; top:50px; /* height of your top bar*/
}

#map{
margin-left:250px;
height:572px;
}

Answer 3:

这样的事情应该是你所需要的。

<style>
#main
{
    width: 900px;
    overflow: hidden;
}

#leftnav
{
    float: left;
}

#map
{
    float: right;
}
</style>

<div id="header">
</div>

<div id="main">
    <div id="leftnav">
    </div>

    <div id="map">
    </div>
</div>

<div id="footer">
</div>

Answer 4:

像这样写：

#map{
    overflow:hidden;
    height:572px;
    border-right: 2px solid #000;
    border-bottom: 3px solid #000;
    }

#leftnav{
    float:left;
    width:250px;
    height: 572px;  
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    }

文章来源: CSS two column full width