So I thought I had finally gotten the better of floats with clear and overflows and stuff, but apparently not.

link : http://opensecretdev.com/tim/

css:

div#wrap {
    background-image:url('images/bg.jpg');
    background-repeat:repeat-y;
    width:830px;
    height:100%;
    margin:0 auto 0 auto;
    text-align:left;
    border:2px solid red;
    }
    
div#head {
    width:830px;
    height:95px;
    background-image:url('images/header.jpg');
    }
    
div#nav {
    margin:0 auto;
    width:710px;
    padding-top:10px;
    }
div#content {
    width:400px;
    margin-left:60px;
    float:left;
    }
div#right1 {
    width:268px;
    height:194px;
    float:right;
    background:url('images/scientificMarketing.jpg') no-repeat;
    margin-right:60px;
    margin-bottom:10px;
    
    }
div#right2 {
    float:right;
    width:268px;
    height:347px;
    background:url('images/actualResults.jpg') no-repeat;
    margin-right:60px;
    margin-bottom:30px;
    }
#clear {
    clear:both;
    width:760px;
    }

I tried overflow:auto and got scroll bars
I tried overflow:hidden and got cut off content
I tried clearing below the floated elements and wrap still won't surround them.

Thank you in advance.

uhh i forgot to add a doctype, nevermind.

You DO have an error there. You've used <div id="clear"> more than once. ID's MUST be unique. If you want to reuse CSS rules, make it a CLASS instead.

ah, thanks i didn't know that!

Also... I've have this recurring problem where i have wrap set to 100% height, but the content does not bring it down to the bottom of the window, then it stops.
Is that understandable? Should I just use a min-height?

Thanks!

You might find this thread useful - if you want your div to be 100% of the height of the browser window regardless of the resolution.

Dan

You're all so helpful and I am very grateful.

Thanksss