CSS help... getting a horizontal scroll bar.

May 4, 2006 4:29 PM

CSS Help: I have a element 650 wide and 180 high. I want items to appear in it and there to be a scroll bar along the bottom so it scrolls horizontally. However, when the elements reach the right edge, a scroll bar appears on the right side and the new element appears on the left under the first element. Why?

I have each item in its own paragraph tag and I've specified a float of left. Shouldn't they keep appearing to the right of the previous item?

I have this:

#podcasts{
width: 650px;
height: 180px;
overflow: auto;
}

#podcasts p {
float: left;
}

I want the items to appear like this:

1 2 3 4 5 6 7 8 9 0

but they appear like this

1 2 3 4 5 6 7 8
9 0

What am I not understanding here?

posted by Manhasset to Computers & Internet (8 answers total)

Set overflow to "scroll" instead?

Set white-space : nowrap; ?
posted by AmbroseChapel at 4:44 PM on May 4, 2006

I assume that your Ps are wrapping at the apparent width of the box, right? This is how float is supposed to work. I guess that the overflow statement considers overflowing down to be preferable to overflowing sideways.

What you want is to force them to all stay on one line.

To do this, make this change (I think--haven't tested):

#podcasts p {
display: inline;
white-space: nowrap;
}

This should force 9 0 to overflow the side, not wrap down.
posted by adamrice at 4:46 PM on May 4, 2006

Response by poster: Thanks guys, but those solutions aren't taking.
posted by Manhasset at 4:55 PM on May 4, 2006

Make the width of #podcast p 65px (650/10), with no margin or padding, and text-align:center.
posted by kirkaracha at 5:03 PM on May 4, 2006

Best answer: Wrap the 10 block elements (the paragraphs, I assume) in <NOBR> tags.
posted by Civil_Disobedient at 5:19 PM on May 4, 2006

That is, wrap all ten elements with one NOBR tag... don't wrap EACH element with a NOBR tag.
posted by Civil_Disobedient at 5:19 PM on May 4, 2006

Response by poster: Thanks!
posted by Manhasset at 5:24 PM on May 4, 2006

Once again, good 'ol tried-n-true HTML markup trumps CSS. :) Glad to help.
posted by Civil_Disobedient at 1:46 AM on May 5, 2006