Spans overlap when viewport is reduced

[Richard Rundle]

Can anyone help me with this one please ?

I've got a page

http://www.fchd.btinternet.co.uk/lghist/humb/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

I've tried playing around with margins and padding, making them divs that
display inline, giving them a height , giving the containing div a bottom
margin and anything else I can think of.

It's not the end of the world, but I'd like to fix it and get it looking and
behaving as I think it should without resorting to a table.

The colours on the items are there for debugging purposes, I may well revert
to not specifiying them when I've finished. Also, CSS is contained within
the file on a temporary basis only to make it easier to see if anyone can
solve the problem - normally it's on a seperate sheet.

I've got hundreds of pages like this for various leagues/seasons, some of
which I have put online when I was less worried about doing things "the
right way", so if I can get it sorted now, I'll need to go back over those.

 

[Jim Moe]

Can anyone help me with this one please ?

http://www.fchd.btinternet.co.uk/lghist/humb/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

Add a line-height:3em to the <span> styles. When the lines wrap, the
text is placed without consideration of vertical margins or paddings.

 

[Neredbojias]

With neither quill nor qualm, Richard Rundle quothed:

Can anyone help me with this one please ?

I've got a page

http://www.fchd.btinternet.co.uk/lghist/humb/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

I've tried playing around with margins and padding, making them divs that
display inline, giving them a height , giving the containing div a bottom
margin and anything else I can think of.

It's not the end of the world, but I'd like to fix it and get it looking and
behaving as I think it should without resorting to a table.

The colours on the items are there for debugging purposes, I may well revert
to not specifiying them when I've finished. Also, CSS is contained within
the file on a temporary basis only to make it easier to see if anyone can
solve the problem - normally it's on a seperate sheet.

I've got hundreds of pages like this for various leagues/seasons, some of
which I have put online when I was less worried about doing things "the
right way", so if I can get it sorted now, I'll need to go back over those.

In addition to Joe Moe's advice, you may want to add "white-
space:nowrap;" to each discrete footer item.

 

[Neredbojias]

With neither quill nor qualm, Richard Rundle quothed:

Can anyone help me with this one please ?

I've got a page

http://www.fchd.btinternet.co.uk/lghist/humb/humb2005.htm

that looks OK to me (at my settings anyway!), but when I try narrowing the
viewport, some of the divs near the bottom of the screen start to overlap in
a rather ugly way.

I've tried playing around with margins and padding, making them divs that
display inline, giving them a height , giving the containing div a bottom
margin and anything else I can think of.

It's not the end of the world, but I'd like to fix it and get it looking and
behaving as I think it should without resorting to a table.

The colours on the items are there for debugging purposes, I may well revert
to not specifiying them when I've finished. Also, CSS is contained within
the file on a temporary basis only to make it easier to see if anyone can
solve the problem - normally it's on a seperate sheet.

I've got hundreds of pages like this for various leagues/seasons, some of
which I have put online when I was less worried about doing things "the
right way", so if I can get it sorted now, I'll need to go back over those.

Oops, that's "Jim Moe".

 

[Richard Rundle]

With neither quill nor qualm, Richard Rundle quothed:

In addition to Joe Moe's advice, you may want to add "white-
space:nowrap;" to each discrete footer item.

Thanks Joe and Neredbojias, that's exactly what I was looking for.

Is adding "white-space:nowrap;" a better idea than replacing spaces in the
links with &nbsp; ?