Floating 100% of Remaining Width

HTML & CSS
1

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!

2

Instead of this:

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

do this:

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

cheers,

gary

3

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

4

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?

5

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

6

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