How to use jQuery to check if element breaks to the next line?
<p>I have a setup that displays two elements side-by-side, specifically an image and a Facebook like box.</p>

<p>The image has <code>float:left</code> and the Facebook like box div/span has <code>float:right</code> - the HTML code looks something like so:</p>

<pre><code>&lt;div class="header"&gt;&lt;img class="logo" src="logo.jpg"&gt;&lt;span class="fb-like-box"&gt;&lt;iframe&gt;&lt;/iframe&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>In certain situations when the browser width shrinks to a certain point, the FB like box will break (or move) to the next line. I have used CSS @media queries to deal with this.</p>

<p><strong>Unfortunately</strong>, certain mobile browsers do not 'break' or move the FB like box to the next line at the same CSS points. For example it renders fine on a 320px width iPhone and a 360px width Note 2. However, on say the Samsung stock browser with a phone width of 380px, the Facebook like box is displayed on the next line and actually the box itself is rendered horribly.</p>

<p>How do I use jQuery to detect if a floating element is displayed on (or breaks to) the next line and execute a CSS modification?</p>

<p>Thanks for the help!</p>