[Solved] Floating / absolute... I'm stuck

Hi,

Eventhough this is my first post here at csscreator.com, it's probably going to be a difficult one, hopely easy for you guys/girls.

What I have a layout which has a [div id="content"] containing a menu to the left [div left] and the text to the right [div right]. Still with me? I continue. underneath [div id="content"] should always stick the [div id="footer"], no matter if [div left] or [div right] has the most content.

At first I used position:absolute on the div left which works as long as [div right] has more content then [div left]. Otherwise [div footer] sticks underneath [div right] (read: [div content]'s height isn't affected by [div left] but by [div right].

So second option: [div left] using float:left. This goes well, no problems here ofcourse.

HOWEVER:
[div right] has a nested [div article_box] which has a float:left div nested followed with some p-text. After this [div article_box] a [p] has the CSS:clear:both. Why? to set the [p] on a new line incase the height of float:left is bigger then the nested text.

But clear:both also clears the float:left of [div left]!! And it shouldn't actually....

H1 text

• bunch listed items

• Bunch of
• listed items

H1

TEXT1

if TEXT1 isn't as high as the height of image this p-text is set to the left of the image but actually should be set on a new line!!!

copyright here

banner here

CSS:

#container-unit{height:100%; margin:0 auto; width:920px; position:relative;}
#container {background: url(images/main/bg.gif) repeat-y left top; width:800px; position:relative;}
#content{position:relative; background-color:#003366;}
#header_primary {background: #FFECEC url(images/main/header_bg_h1.jpg) no-repeat left bottom; height:209px; padding-top:16px;}
#header_primary span{display:none;}
#menu{background: url(images/main/header_bg_menu.jpg) no-repeat center top; height:30px;}
#menu_alg{margin-right:120px; position:absolute; top:10px; right:0; text-align:right;}
#banner_pos1{position:absolute; right:0; top:292px; width:120px;}
#footer{clear:both; padding:0 30px; background: url(images/main/bg_ef.jpg) no-repeat center bottom; height:100px; position:relative;}
#left{position:relative; float:left; margin-left:24px; width:220px;}
#right{position:relative; margin-left:244px; margin-right:30px; padding-bottom:20px; line-height:150%;}
#right .pic_left{float:left; padding: 5px; text-decoration:underline;}
#right .date{clear:both;}
[/code]

I'm really stuck...how can I solve this?

Thanks.

3Pinter