text, ul, image : floating probs

A.Translator

On this page http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw.htm I try to
have three divs: one containing justified text, one containing a ul and one
containing an image.

ul is set to float left, the div with the image in it, to float right.
But both Mozilla and IE put the image underneath the ul, instead of to the
right of it (so it is me, not IE!).

(the image is in a div so that I can write and style text underneath it).

Can someone put me on the right track?
Would be very much appreciated.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

Jul 20 '05 #1

Els

A.Translator wrote:

On this page http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw.htm I try to
have three divs: one containing justified text, one containing a ul and one
containing an image.

ul is set to float left, the div with the image in it, to float right.
But both Mozilla and IE put the image underneath the ul, instead of to the
right of it (so it is me, not IE!).

On my pc (XP) it is IE... Firefox and NS7.1 display the
picture to the right of the ul.
I haven't looked at your code, but it might have to do with
the width of the ul. The indent makes the li's go to the
right, and apparently to much to the right to have the
picture next to it.
Add *{border:1px solid red;} to your stylesheet, to see how
wide things really are. Make sure the total width of the ul
(and it's li's) and the picture div aren't wider than the
width of the container div.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #2

A.Translator

On Mon, 05 Apr 2004 18:06:08 +0200, Els wrote:

The indent makes the li's go to the
right, and apparently to much to the right to have the
picture next to it.
Add *{border:1px solid red;} to your stylesheet, to see how
wide things really are. Make sure the total width of the ul
(and it's li's) and the picture div aren't wider than the
width of the container div.

Thanks for your prompt and helpful reply.
Good to hear things display as intended in FireFox and NS (still not in my
Moz 1.6).
I had thought about there maybe not being enough space: IE shows no
bullets, but seems to indent and push the image to the right.
There should be just enough room, say my red lines.

If I cheat and put the imagebox-div inside the ul-div, IE clearly
illustrates the problem:
http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw2.htm
The image now floats right, and the longest line in the ul oozes over the
rim of the box, so to speak.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

Jul 20 '05 #3

Els

A.Translator wrote:

On Mon, 05 Apr 2004 18:06:08 +0200, Els wrote:

Thanks for your prompt and helpful reply.
Good to hear things display as intended in FireFox and NS (still not in my
Moz 1.6).
I had thought about there maybe not being enough space: IE shows no
bullets, but seems to indent and push the image to the right.
There should be just enough room, say my red lines.

If I cheat and put the imagebox-div inside the ul-div, IE clearly
illustrates the problem:
http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw2.htm
The image now floats right, and the longest line in the ul oozes over the
rim of the box, so to speak.

So, restrict the width of the ul.
And/or use position:relative;left:-4em; on the ul. But that
will make it go to the left in Gecko too.
I don't know if it is possible to make the indent of the
li's equal in 'both' browsers.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4

Els

A.Translator wrote:

On Mon, 05 Apr 2004 18:06:08 +0200, Els wrote: I had thought about there maybe not being enough space: IE shows no
bullets, but seems to indent and push the image to the right.
There should be just enough room, say my red lines.

Might have to do with margins. Set all margins to 0 and see
what happens?

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #5

A.Translator

On Mon, 05 Apr 2004 18:31:53 +0200, Els wrote:

Might have to do with margins. Set all margins to 0 and see
what happens?

Thanks for all suggestions.
I will try them out and report back - just in case anyone is interested ;-)

--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

Jul 20 '05 #6

A.Translator

On Mon, 05 Apr 2004 18:31:01 +0200, Els wrote:

And/or use position:relative;left:-4em; on the ul. But that
will make it go to the left in Gecko too.

trial and error made me set it to left:-2em, which has the desired effect
in both my IE 6 and Moz 1.6...

Thank you!
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

Jul 20 '05 #7

A.Translator

On Mon, 5 Apr 2004 18:40:36 +0200, A.Translator wrote:

And/or use position:relative;left:-4em; on the ul. But that
will make it go to the left in Gecko too.

trial and error made me set it to left:-2em, which has the desired effect
in both my IE 6 and Moz 1.6...

But Opera makes a mess of it (different problem, by the look of it).
I will start all over again.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

Jul 20 '05 #8