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

Что-то, как это должно быть то, что вам нужно.

<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 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

Вам нужно что-то вроде этого:

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

Идея заключается в том, чтобы плавать leftnav и затем установите левый край на карте, которая равна к ширине левого.

Вы можете видеть, что здесь живут: http://dabblet.com/gist/2767788

Answer 4

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

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