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

In article
<bd9a4063-49a3-40f6-a6cf-7af9e45d4019 (AT) k13g2000hse (DOT) googlegroups.com>,
Amir Michail <amichail (AT) gmail (DOT) com> wrote:

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?

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

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

--
dorayme

On Jul 16, 7:58*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
bd9a4063-49a3-40f6-a6cf-7af9e45d4... (AT) k13g2000hse (DOT) googlegroups.com>,
*Amir *Michail <amich... (AT) gmail (DOT) com> wrote:

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?

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

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

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

--
dorayme

In article
<2db21061-cb14-4cb4-a102-6321c1b3de7a (AT) k13g2000hse (DOT) googlegroups.com>,
Amir Michail <amichail (AT) gmail (DOT) com> wrote:

On Jul 16, 7:58*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
bd9a4063-49a3-40f6-a6cf-7af9e45d4... (AT) k13g2000hse (DOT) googlegroups.com>,
*Amir *Michail <amich... (AT) gmail (DOT) com> wrote:

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?

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

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

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

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

On Jul 16, 10:55*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
2db21061-cb14-4cb4-a102-6321c1b3d... (AT) k13g2000hse (DOT) googlegroups.com>,
*Amir *Michail <amich... (AT) gmail (DOT) com> wrote:



On Jul 16, 7:58*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
bd9a4063-49a3-40f6-a6cf-7af9e45d4... (AT) k13g2000hse (DOT) googlegroups.com>,
*Amir *Michail <amich... (AT) gmail (DOT) com> wrote:

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?

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

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

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

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.

It turns out that margin:auto only works in IE7 under certain
conditions (see http://www.webdeveloper.com/forum/showthread.php?t=151555),
and when it does work, it centers with respect to the available free
area and not with respect to the window.

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

The problem is that the widths of the left and right divs are unknown
so I can't use this solution.

Amir

Let me know how it goes in IE.

--
dorayme

In article
<c48e698a-7ba2-4d87-8827-7d1f033884db (AT) p25g2000hsf (DOT) googlegroups.com>,
Amir Michail <amichail (AT) gmail (DOT) com> wrote:

On Jul 16, 10:55*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

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

The problem is that the widths of the left and right divs are unknown
so I can't use this solution.

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