Floating <DIV>

[merkin]

Hey, I recently recieved a complaint that when they visit my site and IE isn't maximized, my 2 <div> float into view over the main content. You can see what I mean at CyanideMagazine (don't maximize IE) here is the code used and it's ref.

<style type="text/css">
<!--
#contest {font-size: 30px;
        padding: 3px;
        height: 35px;
        width: 250px;
        position: absolute;
        right: 60px;
        top: 325px;
        background: #232323;
        border: 2px dashed #F5F8CC;
        text-align: center;
        font-size: 10px;}
--></style>

<div id="contest">
<p><span style='font-size:14.0pt;font-family:Arial'>Win a Signed Copy of This</span></p>
</div>

Is there a way to embed the div so that it won't float into view and overlap the main content?

 

[tgreer]

I think this is because you specify a "right" and a "width", so the content moves when the browser is resized. It's "anchored" 60px from the browser's right edge.

Remove the "right: 60px", and instead specify a "left" coordinate.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[Vragabond]

If you are using absolute positioning, no. You could try setting the width in percentage for the absolutely positioned element and relatively so that they will shrink with smaller window, use floats to make them fall below the main div when the window is too small or embed everything in a fixed width div which will prevent further shrinking.

 

[ChrisHunt]

You need to brush up on how absolute positioning works. If you don't tell it otherwise, it'll position items relative to the browser window - so your contest is always placed 60 pixels left of the right edge, regardless of what it displays over.

However, elements can be positioned absolutely in relation to their parent elements. This happens if those parents are themselves absolutely or relatively positioned. So I suggest you do two things-
[ul]
[li]Give your [tt]body {}[/tt] a fixed [tt]width[/tt] wide enough to hold all the content.
[/li]
[li]Also give it the rule [tt]position: relative;[/tt][/li]
[/ul]

Incidentally, you should be aware that putting all your content into <iframe>s is going to give you real problems with search engines. They're likely to ignore your main page and send visitors straight to pages like

http://www.cyanidemagazine.com/intro.htm

. If you have to use this technique, at least include a link in your framed content pages that take the visitor to your main page.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd