css - CSS 2 カラム全幅

Question

だから私は、ヘッダー、フッター、およびその間にある 2 つのメイン コンテンツ列を持つ Web サイトを持っています。

左の列はナビゲーション用です。右は地図です。どちらもブラウザの幅いっぱいにしたい。さまざまな解像度とさまざまなブラウザーで問題に直面しているようです。マップは常にフッターの下に移動するか、右側に空白が残ります。

私のリンク: 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

このように書いてください：

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

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>