add up widths of elements until a ceiling is meet
<p>I have a header text changes length. I also have a set of logos that have a static length.</p>

<p><b>The problem:</b> 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.</p>

<p><b>Solution in Simple Terms</b> 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.</p>

<h1>For Example:</h1>

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

<p><a href="http://jsfiddle.net/FDkRN/" rel="nofollow">http://jsfiddle.net/FDkRN/</a></p>

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

<p>Thanks in advance!</p>
