1 person found this helpful
look for your:
border: 4px double #FFFFFF;
width: 400px; (You have to insert a width. The 400px is only my trial in order to see what happens, I found 970px was the maximum in FF)
And I miss something like that in the top of your website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The solution above will will make your floats work if the page is at least a certain size, but it not give you a hybrid fixed/liquid layout.
Try adding something like this:
border-left: 282px solid #000644;
Of course you will want to keep all your other rules for those two divs, just add border and margin rules to what you already have.
The idea is that you give a border to the outer container so that #bottomright is constrained to the width that is left inside the container, which is still liquid.
The border itself is a fixed with however. This allow you to move #bottomright inside the border using a negative margin, leaving room for #bottomright to float next to it, inside the actual container.
jxlusa is right of course, my recommendation is adapted to your website with a fixed size. If you don't really like that, there are, as always, several solutions. One of them would be to "pack" all in tables by using percentage allocations for each column. The other is made up of finding solutions from Nancy O.'s (thank's to you) tutorials, which I can highly recommend. Look and explore her hints. Start here for example:
http://alt-web.com/ and look there
jxlusa: your suggestion worked great. I created the border with the same color as the background, used the negative margin, and took the float off of bottomright and it works just fine now. Thanks!
Thanks for all input and thanks for the information links as well.
Good to hear.