ansaurus

Question

Answer 1

+1 A:

Here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html>
<head>
</head>
<body>
    <div id="container" style="position: relative;">
        <div id="col_1" style="float:left; padding-bottom:200px; background-color: #235124;">Some static content<br />Another line</div>
        <div id="col_2" style="float:left">AJAX content</div>   

        <div style="clear:left"></div>

        <div id="flash_container" style="margin-top: -200px; position: absolute;">
                <object>
                    <param name="movie" value="boxheadrooms.swf">
                    <embed src="boxheadrooms.swf" width="550" height="400">
                    </embed>
                </object>
        </div>
    </div>
</body>
</html>

Requires an extra div to wrap it all in but it is required to enable the relative positioning.

Ignore the extra tags, flash objects and background colours I added, they were just to make the problem clearer to me when I was trying to understand what was happening.

Pheter 2009-07-23 14:51:07

Absolute positioning "solves" the posted example, but will lead into trouble if there is content that follows flash object in the real document. This content will clash with the absolute positioned object that does not reserve any space for itself.

buti-oxa 2009-07-23 15:24:05

Thanks :D This works on my code nicely. The flash is also the last object within the containing div, so it doesn't break the page at all.

hfidgen 2009-07-23 16:06:34

As flash objects are of a fixed size you could simply add a margin-top that == the value of the height of the .swf file.

Pheter 2009-07-23 20:10:29

Answer 2

A:

Yes, you can. Negative margin will put your flash container div up there. The question is, how its content should behave.

I guess that if you replace your flash object with long text, you will see that the text, while starting "up there", still wraps around the floats.

Try replacing padding-bottom with margin-bottom or changing the display property of your flash object element.

buti-oxa 2009-07-23 15:08:33

Answer 3

A:

Wrap the two columns in a div and use overflow:hidden to clear the float. Use clear:both and position:relative to get the flash div to move to the left and overlay the two columns.

I added the background colors and heights so I could see where the divs are placed.

   <div id="container">
        <div style="overflow:hidden;">
         <div id="col_1" style="float:left; padding-bottom:200px;background-color:#c00;">Some static content</div>
         <div id="col_2" style="float:left;height:300px;background-color:#0c0;">AJAX content</div>
        </div>

        <div id="flash_container" style="margin-top:-200px;position:relative;clear:both;background-color:#ccc;height:100px;">
         <object>Flash file</object>
        </div>
    </div>

Emily 2009-07-23 15:15:16

ansaurus

tags:

views:

answers:

Div float & negative margin question

related questions