Question

I have a header text changes length. I also have a set of logos that have a static length.

The problem: When the header (text) gets too long or short the logos either do not use the space effectively or the logos end up going to another line.

Solution in Simple Terms I want a script that adds up the width of logos one-by-one and when a certain width is meet it stops showing the logos.

For Example:

– The logos are hidden.
– The header space is 400px
– The container is 800px
– remainder space is 400px
– the script would add up the logos one-by-one until the 400px was meet
– If the 4th logos was at 450px it would not show that logo or any other logo after.

http://jsfiddle.net/FDkRN/

I tried what I know, but I am still new to js so any help would be great.

Thanks in advance!

Answer 1

Fix the width of heading, so its does not cross the boundary and set your logo container to hide the overflow content

h5 { width: 800px; }
#logos ul { white-space: nowrap; width: 400px; overflow: hidden; }