So I have been looking at this floating/positioning issue all day, and I just can't for the love of me figure it out.

The site is http://jorgennovik.com/test/aboutme.html, and the problem is that the brown box to the right won't allow me to float or align objects in the main column. The picture should be on the top of the paragraph, but the brown box bumps it down. If I move the brown box below the main column in the body, then it will stay below the main column at all times.

The brown box is floated right, with clear right. Setting clear to none does not help.

Anyone who can help me on this? Greatly appreciated!!

I would program this a bit differently to prevent the issue.

I would start by fixing this:

body {
font-family:Tahoma, Geneva, sans-serif;
width:100%; <-- Remove, completely not needed and is causing a horizontal scroll bar
background-image: url(images/body_bg.gif);
background-repeat: repeat; <-- Remove, unnecessary
}

I've attached a screenshot of your layout with how I would program it (also attached is a screenshot of how you actually programmed it). The blue would be a nested div in the red div.

Oh, thanks a lot! I'll try creating those left and right columns, and see if that works better.

It worked!! Thanks a lot I guess I should have worked out a better wireframe before I got started.

Again, thanks!

Glad I could help.