Float Question

[Khemikal]

Ok, here is the situation. I've got a header image. What I want to do is float an image to the left of it, an image to the right of it, and an image perfectly centered in it.

I did something along the lines of:

<div id="header">
<img src=image" style="float: left;"></img>
<img src="image"> style="margin: 0 auto;"></img>
<img src=image" style="float: left;"></img>
</div>

I thought this would work great, but for some reason the right float image keeps dropping a below the other two. The page is a liquid design set for 96% width.

Any ideas or suggestions would be appreciated.

Thank you.

Khem

[D_Blackwell]

The img tag is a one-sided tag that self closes <img src="xx" />

This works in Firefox and IE6:
<div id="header" style="width: 96%; text-align: center;">
<img src="image" style="float: left;" />
<img src="image" style="float: right;" />
<img src="image" />
</div>
[edit]Tired - and making my own foolis mistakes.[/edit]

[edited by: D_Blackwell at 4:01 am (utc) on April 19, 2004]

[Purple Martin]

Firstly, you really b0rked your sample code, with missing quotes and spurious angle brackets and left instead of right ;)

Secondly, change the order of the tags like this:

<div id="header">
<img src="image" style="float: left;">
<img src="image" style="float: right;">
<img src="image" style="margin: 0 auto;">
</div>

That's because of the way floats work, by taking the images out of the normal flow of the document.

[Khemikal]

Thanks guys...thats the last time I try and make an example with as little info as possible from memory instead of cut/paste :)

Khem