clear:left problems

[Malcolm Collett]

On this page:
http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
I am having some problems with clear:left.

Below the Gladiator Castle div is a <hr> with clear:left on it. What I would
like is that <hr> should clear the photo in the same div, but it is clearing
nav list as well. This results in a large blank space below the photo.
How do I get rid of this blank space?

(I tried floating the photos to the right and using clear:right on the <hr>,
but then the image of the main content div leaks to the left and fills the
space below the nav list.)

Malcolm

 

[Lauri Raittila]

On this page:
http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
I am having some problems with clear:left.

Below the Gladiator Castle div is a <hr> with clear:left on it. What I would
like is that <hr> should clear the photo in the same div, but it is clearing
nav list as well. This results in a large blank space below the photo.
How do I get rid of this blank space?

Use absolute postioning for your navigation. It works just as well as
float, as you already use margin for content.

 

[Paul Furman]

On this page:
http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
I am having some problems with clear:left.

Below the Gladiator Castle div is a <hr> with clear:left on it. What I would
like is that <hr> should clear the photo in the same div, but it is clearing
nav list as well. This results in a large blank space below the photo.
How do I get rid of this blank space?

(I tried floating the photos to the right and using clear:right on the <hr>,
but then the image of the main content div leaks to the left and fills the
space below the nav list.)

Strange: in IE6 if I scroll down then back up a gap revealing the
background image apprears. Before that I can see a slight diff in width
of the foreground color where the menu cuts into it. It works as you
wish in mozilla.

 

[Malcolm Collett]

Use absolute postioning for your navigation. It works just as well as
float, as you already use margin for content.

Thanks Lauri

I ended up making just one small change.
I replaced
#NavLeft {float:left; ...}
with
#NavLeft {position:absolute; left:0; ...}
I haven't specified top, right or bottom, as they should default to auto.

Is this useage of position:absolute correct? Works great in IE!

Malcom

 

[altamir]

I ended up making just one small change.
I replaced
#NavLeft {float:left; ...}
with
#NavLeft {position:absolute; left:0; ...}
I haven't specified top, right or bottom, as they should default to auto.

Is this useage of position:absolute correct? Works great in IE!

Many people use absolute positioning. Floating is badly supported,
specially in IE.
One more thing: remove background-image declaration from #NavLeft, because
you've got it already in the 'body' element. Make it transparent.

 

[Malcolm Collett]

One more thing: remove background-image declaration from #NavLeft, because

you've got it already in the 'body' element. Make it transparent.

Thanks, will do.
Malcolm