css - CSS 两列全宽

Question

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

左列用于导航。右边的是地图。我希望两者都填充浏览器的宽度。我似乎面临着不同分辨率和不同浏览器的问题。地图总是移动到页脚下方，或者在右侧留下一个空白区域。

我的链接：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;
    }