Centering logo between left and right floats with different widths.

[Amir Michail]

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

[dorayme]

In article
<bd************ *************** *******@k13g200 0hse.googlegrou ps.com>,
Amir Michail <am******@gmail .comwrote:

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.a u/alt/left_right_midd lePic.html>

--
dorayme

[Amir Michail]

On Jul 16, 7:58*pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<bd9a4063-49a3-40f6-a6cf-7af9e45d4...@k1 3g2000hse.googl egroups.com>,
*Amir *Michail <amich...@gmail .comwrote:

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.a u/alt/left_right_midd lePic.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:le ft">...</div>
<div style="float:ri ght">...</div>
<div style="margin:a uto;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:bo th"></div>

Amir

>
--
dorayme

[dorayme]

In article
<2d************ *************** *******@k13g200 0hse.googlegrou ps.com>,
Amir Michail <am******@gmail .comwrote:

On Jul 16, 7:58*pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<bd9a4063-49a3-40f6-a6cf-7af9e45d4...@k1 3g2000hse.googl egroups.com>,
*Amir *Michail <amich...@gmail .comwrote:

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.a u/alt/left_right_midd lePic.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:le ft">...</div>
<div style="float:ri ght">...</div>
<div style="margin:a uto;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:bo th"></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.a u/alt/left_right_midd lePic2.html>

Let me know how it goes in IE.

--
dorayme

[Amir Michail]

On Jul 16, 10:55*pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<2db21061-cb14-4cb4-a102-6321c1b3d...@k1 3g2000hse.googl egroups.com>,
*Amir *Michail <amich...@gmail .comwrote:

On Jul 16, 7:58*pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<bd9a4063-49a3-40f6-a6cf-7af9e45d4...@k1 3g2000hse.googl egroups.com>,
*Amir *Michail <amich...@gmail .comwrote:

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.a u/alt/left_right_midd lePic.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:le ft">...</div>
* * * * * * <div style="float:ri ght">...</div>
* * * * * * <div style="margin:a uto;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:bo th"></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/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.

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.a u/alt/left_right_midd lePic2.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

[dorayme]

In article
<c4************ *************** *******@p25g200 0hsf.googlegrou ps.com>,
Amir Michail <am******@gmail .comwrote:

On Jul 16, 10:55*pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

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.a u/alt/left_right_midd lePic2.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.a u/alt/left_right_midd lePic3.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