I’m coding my first more serious web design using div’s and CSS styling (I’m kinda newbie in it). I had spent a lot of time to make, what I did now (about 30% of all design) and now I’m in position in which I spent a lot of time, but still didin’t find the solution.
Here is image of how that part of design should look properly in all browsers:

Here is image, of how it looks coded now in IE8 (I marked in blue wrong part):

You can see gap which shouldn’t be here…
And in same time how it looks in Mozilla Firefox 9.0.1 (boxes are div’ed okey, but text don’t go in place):

I think it can be something with float’s because I used it in some divs.. But I don’t know exactly what and how to even start searching for solution to this… So I came to Stack Overflow. Because I don’t know which exactly parts of HTML and CSS to copy now, I’m uploading all the web (with images) and giving a link to check it: http://www.mediafire.com/?uf6bzly4dktummk
I hope someone can help me :s
Sorry for my bad english.
The reason for the gap was that mine HTML file lacked a DOCTYPE, thereby triggering Quirks Mode. My code implied the document type to be XHTML, so I added this to the top of the code, replacing the current tag.