Question

I have a div whose contain a flash and a image,and I want them displayed inline,and want the flash div take the rest width of the container(the image div should take the width as the image itself).

So I make the flash float left.

<div id=chartcon>
    <div id="chartflash" style="float:left"></div>
    <div id="map"><img src="../example.jpg"></div>
    <div style="clear: both;"></div>
</div>

But it does not work,the image always sit under the chartflash div.

It seems that the chartcon’s width is too large,so the map div have to sit under it.

So I try to calculate the width and height of the chartflash div dynamiclly:

var mapWidth = parseInt($('#map img').css('width'));
var mapHeight = parseInt($('#map img').css('height'));
var chartwidth = parseInt(window.screen.width - mapWidth - 70);
$('#chartflash').width(chartwidth);

The ’70’ is not sure(I have try it many times),if it is smaller than 70,the image will also displayed under the chartflash div.

Though the problem is sloved by calculate dynamiclly,but I do not think it is a good idea,I wonder if there is any css ways to make this?

Answer 1

I would put the image inside the div containing the flash file, and float it right.
I put the css inline so you see it in context.

<div id="chartcon">
    <div id="chartflash">
            <div id="map" style="float:right"><img src="../example.jpg"></div>
            <div style="clear: both;"></div>
    </div>
</div>