Question

I hope this is a simple one, but I can’t seem to be able to crack it quickly…

I’ve got a 2 column layout, with the content in the right column being dynamic and ajax driven. So the page height changes depending on what is in the right column.

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

That’s easy. The problem is.. I want the flash to have a negative top margin of -200px, so it doesn’t get stuck out all on it’s own. This also reduces the wasted 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’ve simplified the code quite a lot, but you should see what i mean. Simple 2 columns, clear the columns, bung a negative margin on the flash div. Works fine in IE6, Safari, Fails miserably in Opera, Firefox and Chrome.

Can you apply a negative margin “through” a clear?

All help appreciated 😉

Answer 1

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>

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.