Geek Answers Handbook

Div float & negative margin

Hope it's easy, but I can't hack it quickly ...

I have a layout in 2 columns, and the content in the right column is dynamic and controlled by ajax. Thus, the height of the page changes depending on what is in the right column.

I want to have a small flash file (400px x 200px) attached to the bottom of the page, but under column 1.

It is easy. The problem is that I want the flash to have a negative top edge of -200px, so it does not focus on itself. It also reduces empty white space.

<div id="container"> <div id="col_1" style="float:left; padding-bottom:200px;">Some static content</div> <div id="col_2" style="float:left">AJAX content</div> <div style="clear:left"></div> <div id="flash_container" style="margin-top:-200px;> <object>Flash file</object> </div> </div>

I simplified the code quite a bit, but you should see what I mean. Simple 2 columns, clear the columns, break through the negative margin on the flash div. It works fine in IE6, Safari, and is difficult to hold back in Opera, Firefox and Chrome.

Can you apply a negative supply of "through" a clear?

All help is appreciated;)

+4
source share
3 answers

Here you go:

 <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>

It takes an extra div to wrap it all up, but you need to enable relative positioning.

Ignore the extra tags, flash objects and background colors that I added, they just had to make the problem more clear to me when I was trying to understand what was going on.

+4
source

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

I assume that if you replace your Flash object with long text, you will see that the text, when it is run there, is still wrapping around the floats.

Try replacing the bottom of the bottom border or changing the display property of a flash object element.

0
source

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

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

  <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>
0
source

More articles:


All Articles