CSS float problem

Question

I am using float and then clearing both. but still i have getting some error in the layout. can some one point out what the problem is ?

http://uniquedl.com/3closets/about.html

i want Sneak-peek control div and sneak peek products div to be next to each other. i am using this code to make it next to each other

.grid {
    display:inline;
    float:left;
}

But sneek-control is taking a lot of margin to the left and not sitting below the above div block

i want the layout to look like this

Answer 1

If you set a height on your .intro-image to 384px same size as image it should work.

.introduction .intro-image {
    width: 288px;
    height: 384px;
}

Answer 2

.sneak-peek {

clear: both;
float: left;
height: 288px;
text-align: left;

}

should do it.

You also have some problems there... check IE 7 after you finish. Probably they'll clear out by themselves.