Floating 100% of Remaining Width

Howdy,

I am trying to make two columns float nicely, side by side. Essentially, I have a navigation div, and a dashboard div, floated left and right respictevely. I want the navigation div to remain at 150px, whilst the dashboard div will take 100% of the remaining width, so that they layout remains as fluid as possible!
I have tried code like this, but the dashboard div is remaining as stuborn as ever!


div#navigation{
	width: 150px;
	float: left;
}

div#dashboard{
	float: right;
	width: 100%;
	margin-left: 160px;
}

Many thanks for any help!

Instead of this:

div#dashboard{
    float: right;
    width: 100%;
    margin-left: 160px;
}

do this:

div#dashboard{
    margin-left: 160px;
}

cheers,

gary

Thanks very much, Gary. Should have tried that before I asked for some help!

Hmm, that only presents me now with one problem, if I run a clear: both, it pushes straight down underneath the navigation! I need the clear: both to run, so that the next display block appears succesfully! Any ideas?

So after the dashboard div you wnat the next content to appear good? You can use the clearfix technique.

You haven’t posted your source, so we can’t really suggest the optimal solution. Just from the nature of the complaint, I’d guess you need to put the {clear: both;} on the following element. There are other solutions, but without the source, ….

cheers,

gary