Question

http://www.magnixsolutions.com/dev/magicmorgan/indexnew.html

Im trying to have all three DIVs; left image, flash content in the middle, and right image to stay center. When I drag the size of the browser smaller, the div of the right image broke to the bottom. They should be fixed inline together horizontally with whatever size of the browser I minimize.

Also the flash in the middle is not aligned to the top? I cant understand what I did wrong.

Heres the code I did (I wasnt allow to display img tags on this website)

CSS:

    body{width:100%; margin: 0 auto 0 auto;}
    #content{text-align:center; }
    .content-left{width:362px; display: inline-block;}
    .content-center{width:950px; display: inline-block;}
    .content-right{width:427px; display: inline-block;}

HTML:

<div id="content">
    <div class="content-left">LEFT IMAGE HERE</div>
    <div class="content-center">
     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="950" height="1000" id="index" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="index.swf" />
            <param name="menu" value="false" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <embed src="index.swf" menu="false" quality="high" bgcolor="#000000" width="950" height="1000" name="index" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
    </div>
    <div class="content-right">RIGHT IMAGE HERE</div>
</div>

Answer 1

In order to keep them inline you need to express the widths in percentages so that they can get smaller as the screen gets smaller. If the elements cannot be allowed to re-size than you need to give the body a fix width in pixels to maintain alignment.