Centering logo between left and right floats with different widths.

Hi,

I would like to center a logo between left and right floats with
different widths.

The issue is that the logo should be centered with respect to the
window, not the area between the left and right floats.

Is there an easy way to do this?

Amir

re: Centering logo between left and right floats with different widths.

In article
<bd9a4063-49a3-40f6-a6cf-7af9e45d4019@k13g2000hse.googlegroups.com>,
Amir Michail <amichail@gmail.comwrote:

There are a few ways to do this. You might fancy this:

<http://netweaver.com.au/alt/left_right_middlePic.html>

--
dorayme

re: Centering logo between left and right floats with different widths.

On Jul 16, 7:58*pm, dorayme <doraymeRidT...@optusnet.com.auwrote:This approach doesn't work for me on IE 7 but it's fine with Firefox
and Safari:

http://chatbotgame.com

Here's the html fragment:

<div style="float:left">...</div>
<div style="float:right">...</div>
<div style="margin:auto;width:285px"><A HREF="http://
chatbotgame.com"><img width="285" border="0" src="http://
chatbotgame.com/ChatbotGame/chatbotgamelogo.png"></img></A></div>
<div style="clear:both"></div>

Amir

re: Centering logo between left and right floats with different widths.

In article
<2db21061-cb14-4cb4-a102-6321c1b3de7a@k13g2000hse.googlegroups.com>,
Amir Michail <amichail@gmail.comwrote:

OK, I have not got IE7 right here so can't see what the trouble might be
but I assume you are not worried about the middle dropping out of the
line of the left and right floats? On my example that should not happen
because of the min-width on body. It looks from your implementation that
you have not copied this feature.

Anyway, as I said, there are other ways and IE can be troublesome as it
fails to adhere to standards. Lets try another approach:

<http://netweaver.com.au/alt/left_right_middlePic2.html>

Let me know how it goes in IE.

--
dorayme

re: Centering logo between left and right floats with different widths.

On Jul 16, 10:55*pm, dorayme <doraymeRidT...@optusnet.com.auwrote:It turns out that margin:auto only works in IE7 under certain
conditions (see http://www.webdeveloper.com/forum/sh....php?t=151555),
and when it does work, it centers with respect to the available free
area and not with respect to the window.
The problem is that the widths of the left and right divs are unknown
so I can't use this solution.

Amir

re: Centering logo between left and right floats with different widths.

In article
<c48e698a-7ba2-4d87-8827-7d1f033884db@p25g2000hsf.googlegroups.com>,
Amir Michail <amichail@gmail.comwrote:
OK, you want a general solution where either left or right float being
wider gets the image dead centre, try this:

<http://netweaver.com.au/alt/left_right_middlePic3.html>

(There is a combined construction to hide stuff from both IE 6 and 7 in
a conditional, I have simply put repeated styles for both)

I use the rel positioning for IE because the pic holder div needs to be
given a 100% width to tell it to calculate middle from the sides of the
viewport (in effect, considering no margins on parents). But this then
drops the div because there is no room for the floats any more! Never
mind, we can up the images into line by pushing it with rel positioning.

There is likely a better solution, but I had fun making this.

--
dorayme