View Full Version : floating troubles...

07-16-2005, 06:26 AM
i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on).

i've got a page that basically follows this order:
-header (h1)
-4 main menu blocks (div-ul-li-a)
-firefox plug (h3)
-main content container (div)
----... (small bit of irrelevant content)
----google adsense block (p)
----entry container (div)
-------entries (div-h4-ul-li)
----end entry container (/div)
-end main content container (/div)
-4 less-relevant menu blocks (div-ul-li-a)
-footer (hr-p)

if that's confusing to you, check out the source code here: http://www.gogogadgetearl.com/working/

anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great.

problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: http://www.stopdesign.com/articles/css/replace-text/ -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks.

problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right.

basically, i want my xhtml 1.1 'working page' (http://www.gogogadgetearl.com/working/) to look and act like my current page: http://www.gogogadgetearl.com/

-i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-)
-i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element).

==source code==
working xhtml (veiw source) - http://www.gogogadgetearl.com/working/
working css - http://www.gogogadgetearl.com/working/styles/classic/classic_common.css
current xhtml (veiw source) - http://www.gogogadgetearl.com/
current css - http://www.gogogadgetearl.com/css/default_common.css
if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-)

a HUGE thank-you to anybody willing to help me!!

07-16-2005, 01:29 PM
this diesnt fix yr problems, but for a star, i think your right column should be in a div#right, not a bunch of divs that are by themselves floating right symantically above your content. ... also is the desired effect to get your ADS like here?

margin-bottom: 16px;
margin-left: 0px;
float: right;

#content_entries {

just trying to clarify.

O!!... btw, ad's suck.. imho... but thats just me

i think the problem might become more appearent if you think in columns, but im nt sure yet,..... lookin at it though.... ill let ya kno...

07-16-2005, 06:51 PM
yeah, ads suck, but google ads aren't too bad and they make a killer over other ads. i get enough to pay for my web hosting! ;-)

well, that didn't really solve my problem. setting the margin of the entries container to 200px makes the width of the entries really short all down the page. also, putting the menu blocks into one container div would require me to put the less-relevant menus above my main content in the xhtml, forcing those viewing my page without a stylesheet (e.g. viewing my site with lynx from a linux console) to have to scroll past a bunch of junk just to get to the content. i know there's a way, i just haven't found it yet.

if anybody has, i'd love to see it! ;-)