Side-by-side floats

Can two floats be side by side no matter what the width is?

basically I have this below:

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

I want the navigation and the content to always be side by side. The navigation has an initial width of 300px, however you can close it using jquery and then it only takes up 15pxs. I want the content to always fill the remain开发者_JS百科ing portion of the container. Right now I keep getting it so when the width gets small, the content gets bumped down below the navigation.

Here is a link to jsfiddle to help show what i'm talking about.

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

This is very generic. There are many ways to achieve this, and I'll tell you how I'd do it (with JavaScript, of course). There are two situation: 1. nav extended and 2. nav collapsed. I'd use position: absolute for the navigation, and the corresponding width, while having a padding on the container to accommodate the width of the navigation, and add a class to the container depending on the situation.

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

The only risk is that the navigation is higher than the content, and will get trimmed. You can prevent that by using a min-height on the container.

Side by side floating can be tricky sometimes depending on the browser. (I have found issues with IE and using up 100%)

I changed the navigation and content areas to use %-based widths - (20%/80%) and that seemed to easily fit them next to each other.

Link with %-Based Widths

Have you considered using something like a "splitter" to separate the content and navigation and make them adjustable?

jQuery Splitter

I used something like that recently and it really worked for what I was trying to accomplish. You could possibly adjust the widths of the areas explicitly - when you alter the navigation width with something similar to below:

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

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

Pardon the pseudo-code, it was off the cuff.

Anyways - I hope something here you were able to use :)