Боковые боковые поплавки

Question

Могут ли два поплавка быть бок о бок независимо от ширины?

в основном я это ниже:

#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; } 
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;} 
#content { float: left; background-color: blue;} 

<div id="container"> 
<div id="navigation"> 
    <ul> 
     <li>1. nav stuff </li> 
     <li>1. nav stuff </li> 
     <li>1. nav stuff </li> 
    </ul> 
</div> 
<div id="content"> 
    <p>Lorem ipsum snip....ultricies.</p> 
</div> 
<div> 

Я хочу навигации и содержание, чтобы всегда быть рядом. Навигация имеет начальную ширину 300 пикселей, однако вы можете закрыть его с помощью jquery, а затем он занимает всего 15 пикселей. Я хочу, чтобы содержимое всегда заполняло оставшуюся часть контейнера. Прямо сейчас я продолжаю получать это, когда ширина становится маленькой, содержимое становится наклонным вниз по навигации.

Вот ссылка на jsfiddle, чтобы показать, что я говорю.

http://jsfiddle.net/M9sZd/2/

Answer 1

бок о бок с плавающей может быть сложно, иногда в зависимости от браузера. (Я нашел проблемы с IE и использовал до 100%)

Я изменил область навигации и контента, чтобы использовать ширину на основе% - (20%/80%), и это казалось легко сместило их рядом друг с другом.

Link with %-Based Widths

Рассматривали ли вы использовать что-то вроде «разветвитель» для разделения контента и навигации и сделать их регулируемые?

jQuery Splitter

я использовал что-то вроде, что в последнее время, и он действительно работал на то, что я пытался сделать. Вы могли бы регулировать ширину областей явно - когда вы изменяете ширину навигации с чем-то подобным ниже:

var containerWidth = $("#container").width(); 

onChange() 
{ 
    $("#navigation").css("width", 15px); 
    $('#content").css("width", containerWidth - 15); 
} 

Pardon псевдо-код, он был экспромтом.

В любом случае - я надеюсь, что что-то здесь вы можете использовать :)

Answer 2

Это очень общий характер. Есть много способов добиться этого, и я расскажу вам, как бы я это сделал (с JavaScript, конечно). Есть две ситуации: 1. nav extended и 2. nav рухнули. Я использовал бы position: absolute для навигации и соответствующую ширину, имея набивку на контейнере для размещения ширины навигации и добавляя класс в контейнер в зависимости от ситуации.

#navigation { position: absolute; left: 0; top: 0; width: 300px; } 
#navigation.collapsed { width: 15px; } 
#container { position: relative; padding-left: 300px;} 
#container.nav-collapsed { padding-left: 15px; } 

Единственный риск состоит в том, что навигация выше содержания и будет обрезана. Это можно предотвратить, используя min-height на контейнере.