Recently a member of my team encountered 2 development problems that in my opinion are not really complicated but it seems people get stuck in such small stuff all the time so I decided to add the solution here maybe someone else might find it useful:
Trick #1. Getting several columns to adjust their height together according to the one with most content:
here we want to make the red DIV extend to the bottom of the container when the blue DIV has extra content, the simple solution to this is to structure them as follows:
<div id="container" style="background:url(X) repeat-y;"> <div id="redDIV" style="float:left;"> your content here </div> <div id="blueDIV" style="float:left;"> your other content here </div> <div style="clear:both;"></div> </div>
the trick is to insert a background image in place of the big red “X” in the code that displays the background for both the red and the blue DIV, that way any content that expand either will extend the container to fit because you have a clear:both DIV after the two floating red and blue DIVs and it works all the time on every modern browser.
Trick #2. A YouTube content widget imports video who’s titles are either in English or in Arabic, the problem here is that the font does not display nicely in both cases, if you adjust for English the Arabic looks terrible, if you adjust for Arabic the Englsh looks huge, and there is no direct or simple way to know in what language the content is in… or is there?
well actually there is, English content will be coded in ASCII codes below 128 and Arabic will be coded in higher values so the trick is to get any non-numeric random sample character from the content stream and check the ASCII code for it, if higher than 128 the it’s Arabic and you can instruct your code to inject a suitable CSS class to match the case and vice-versa for English.
For a listing of the lower ascii codes check http://www.klcconsulting.net/images/ascii-full.gif
let me know if you have similar cases and if my solutions worked for you (or not).