Border problem.

[Esoltas]

I've been creating a website for my portfolio, and I've hit a bizzare problem.
Look at this link: http://freewebs.com/phi_studios/Blog%20idea/test3.htm
How can I make the box around the words Projects Catalogue "swallow" the two columns below?
I'm not stupid, and I put a div around the columns. When I did, it stayed around the header and the bottom box swallowed it for it. For now, I have written clear:both to avoid any messiness.

I believe the problem has to do with floating the columns, because when I had un-columned text there it was a-okay.

If you need to see exactly what effect I'm trying to achieve, I have attached an image where I edited a screenshot. (The quality has been dramatically reduced to load onto K because I'm lazy.)

Thanks. Alot.

[MTsoul]

A parent container will not wrap around floating (left or right) child elements unless there is a non-floating element after the floating elements. Put an empty element (hr, div, anything that's a block) after the two columns with the CSS property "clear: both", and the container will stretch to that height.

[Esoltas]

That would make a lot of sense. Thanks a whole bunch. Do you like the design, Oliver?
By the way, that trick is going in my repetoire. (Fav'ed the page.)

[MTsoul]

I like that it's clean and cleanly layed out. You should post it in the showcase section to get some more critique :)