Can someone please tell me what I am doing wrong with these images that I was side by side? IE 6 & 7 displays them beautifully, however fireworks is ignoring the float style completly, any ideas? This is the page in question: http://www.spotlight.com.au/projects/sewing_new

<div id="twoColContent">
<div id="thumbs">
<a href="./?f=71228" target="_blank"><img src="./?f=71230" width="115" height="163" alt="Project Image" border="0"></a>
<div class="dl"><a href="./?f=71228" target="_blank">Click to download</a></div>
</div>
<div id="thumbs">
<a href="./?f=71209" target="_blank"><img src="./?f=71231" width="115" height="163" alt="Project Image" border="0"></a>
<div class="dl"><a href="./?f=71209" target="_blank">Click to download</a></div>
</div>
</div>

STYLE SHEET:
#twoColContent #thumbs { position: relative; float: left; margin-right: 11px; margin-bottom: 10px; height: 135px; }

You don't need the position: relative; there. Try taking that out and looking at it in Firefox (I don't think that you mean Fireworks ).

I looked and the coding and I don't even see the CSS that you said was associated with that. I think that IE treats most block-level elements as inline elements. It does that with divs too...

I tried that - and it's still the same :-(

When I add the inline style <div style="float:left;"> instead of <div id="thumbs">, then it works fine in both browsers...can anyone explain why the style doesnt work in the style sheet?

Check your stylesheets again. I looked for the #twoColContent and #thumbs styles (like coolkbk585 did), and I didn't find that style anywhere.

If you specify a float on a div, you MUST also define a WIDTH. The only time you don't have to do that is if you're floating an image - it has a width already defined - or should have.

I looked at the page in Firefox.. I didn't see any float problems. ?

Sorry, I was feed up trying to make it work with the style sheet so I just added the inline style for that page. But if i could make it work I would like to because its a lot cleaner. So I have re-created the problem on this page: http://www.spotlight.com.au/projects/sewing_test. The style sheet can be viewed here: http://www.spotlight.com.au/projects...2/projects.css

As you can see in the style sheeet I have set the width of the DIV and then set the float to left. This appears correctly in IE but not in Firefox.

Style sheet code:

#twoColContent #thumbs { width: 125px; float: left; margin-right: 10px; margin-bottom: 10px; }

HTML code:

<div id="twoColContent">
<div id="thumbs">
<a href="./?f=71276" target="_blank"><img src="./?f=71278" width="115" height="163" alt="Project Image" border="0"></a>
<div class="dl"><a href="./?f=71276" target="_blank">Click to download</a></div>
</div>
</div>

Just like yesterday..
Nowhere in your CSS, any of the 3 CSS files, did I find #twoColContent #thumbs. However, you DO have a CLASS - .thumbs - set with hovers, but no floats.

Your HTML calls for a CLASS too:

<div id="twoColContent">

<div class="thumbs">
<a href="/__data/page/12485/Applique_cushion.pdf" target="_blank"><img src="/__data/page/12485/Applique_cushion-1_copy.jpg" width="115" height="163" alt="Project Image" border="0"></a>
<div class="dl"><a href="/__data/page/12485/Applique_cushion.pdf" target="_blank">Click to download</a></div></div>