Float/Div Confusion

[Ian Watts]

I am trying without success to understand what is going on. I am
developing a site at

http://www.ianwatts.info/edensor/

http://www.ianwatts.info/edensor/edensor.css

and I have two problems.

1. I want the text (The Best Lesson of the Week) to sit at the right
hand side of the image - I have tried not floating, and it sits
underneath the image, the same goes with setting margin-left to 50 or
60% - it still sits underneath. So I tried floating left, and it then
sits outside the content div altogether. Surely float shouldn't take it
out of its normal flow?

2. The menu bar (which I pinched the idea from
http://www.alistapart.com/articles/dropdowns) will not center in the
content div - it pushes to the left all of the time. I have tried
various solutions, but to no avail.

I realise that navigation that relies on JS isn't a good idea, and when
finished the site will have alternative navigation in for non JS users -
for now it is simply a prototype.

Many thanks in advance
Ian Watts

[Ian Watts]

Ian Watts wrote:

I am trying without success to understand what is going on. I am
developing a site at

http://www.ianwatts.info/edensor/

http://www.ianwatts.info/edensor/edensor.css

and I have two problems.

1. I want the text (The Best Lesson of the Week) to sit at the right
hand side of the image - I have tried not floating, and it sits
underneath the image, the same goes with setting margin-left to 50 or
60% - it still sits underneath. So I tried floating left, and it then
sits outside the content div altogether. Surely float shouldn't take it
out of its normal flow?
I forgot to say that I have tested in IE6 and Firefox .8 - in IE6 it
stays within the content div but below the image -what am I doing wrong?
2. The menu bar (which I pinched the idea from
http://www.alistapart.com/articles/dropdowns) will not center in the
content div - it pushes to the left all of the time. I have tried
various solutions, but to no avail.

I realise that navigation that relies on JS isn't a good idea, and when
finished the site will have alternative navigation in for non JS users -
for now it is simply a prototype.

Many thanks in advance
Ian Watts

[Neal]

On Mon, 17 May 2004 22:27:53 +0100, Ian Watts
<iw****************@ntlworld.com.and.this> wrote:

I am trying without success to understand what is going on. I am
developing a site at

http://www.ianwatts.info/edensor/

http://www.ianwatts.info/edensor/edensor.css

and I have two problems.

1. I want the text (The Best Lesson of the Week) to sit at the right
hand side of the image - I have tried not floating, and it sits
underneath the image, the same goes with setting margin-left to 50 or
60% - it still sits underneath. So I tried floating left, and it then
sits outside the content div altogether. Surely float shouldn't take it
out of its normal flow?

Float sends it to the farthest possible position in its containing block,
and the next element is rendered at the floated element's position.

If you want the image and the text at the same vertical height, float what
comes first. Otherwise, it goes to its normal flow, which is whjat's
happening quite correctly.

[Ian Watts]

Neal wrote:

On Mon, 17 May 2004 22:27:53 +0100, Ian Watts
<iw****************@ntlworld.com.and.this> wrote:

I am trying without success to understand what is going on. I am
developing a site at

http://www.ianwatts.info/edensor/

http://www.ianwatts.info/edensor/edensor.css

and I have two problems.

1. I want the text (The Best Lesson of the Week) to sit at the
right hand side of the image - I have tried not floating, and it sits
underneath the image, the same goes with setting margin-left to 50 or
60% - it still sits underneath. So I tried floating left, and it then
sits outside the content div altogether. Surely float shouldn't take
it out of its normal flow?

Float sends it to the farthest possible position in its containing
block, and the next element is rendered at the floated element's position.

If you want the image and the text at the same vertical height, float
what comes first. Otherwise, it goes to its normal flow, which is
whjat's happening quite correctly.

Thanks Neal

I tried that, and first off - nothing - the text still seemed to
disappear down the bottom, underneat the content div.

However, it seems that the menu bar was confusing matters - when I put
that in a containing div, eveything worked fine.

However, I still can't get the menu bar to center - I have tried setting
margin-left and margin-right to auto, and have tried text-align to
center (all of this on menu div, the container for the menu), but it
seems to stay pushed to the left.

I have tried this in IE6 and Firefox .8.

Thanks

Ian