CSS positioning - Looks right but performs funny

Question

The website is located: http://www.imvu-e.com/products/sro/

the css file here: http://www.imvu-e.com/files/style.css

I like where the download div and logo div is located, but for some reason the text on the webpage is following some weird box that firebug won't inspect correctly (like download div is somewhere its not). I am pretty sure its related to my poorly coded css where the content div has no float, the logo has float:right and then then download div has clear:right florat:right and then I use top: to position in line with the logo. Both the logo and download bar also is "positioned" with margins...lol. I hate css.

Answer 1

Your problem relates to the 'clear:right; position:relative; top:-xxx;' of the "Download" image.... as you are moving this image up by hand, the space you're seeing after the "Silent Room Observer" line, is where the "Download" image would go if you take out the 'relative';

scotts solution should work... remember that when your css class get to complex and convoluted... it usually is and there's a better/easier way of doing it :)

Answer 2

This should get you in the general direction of what you want:

1) Move your h1 in your source to be before your floated "download" and "logo".

2) Remove the clear: right and top: -70px on "download" and change margin-right to about 30px

3) Set margin-top: -30px (or so) for "logo"

Answer 3

It's your poor CSS. You've got top: -70px; on #download, which moves that up to the same height as #logo, but the text wrapping ignores that.