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).

The purpose of this post is to help people who are facing the problem of moving from normal Table-based layouts in HTML to the newer Tableless (or DIV-based) layouts, I’ll try to provide the simplest guide and steps to understand the DIV concept…

1. Why do I need to change?

• There is a major performance issue with table-based layouts, the browser needs to calculate the table structure in memory first, then it does a second calcualtion  to actually render it on screen, all this the user is seeing nothing until the whole content suddenly appears (you can overcome this through CSS)
• Tables are harder to maintain or update once completed, as adding an extra column or row specially if you have lots of rowspans or colspans, sometime redesigning the whole table would be easier.

2. What do I need to understand?

• What is a DIV?

  A DIV is simply a layer with defined dimensions (either by % or pixels) that can be positioned in any part of the screen and on separate layers and can automatically float (move) around according to screen dimensions and content thus giving you 100% flexibility to implement your design

• The CSS Box-Model (margin – border – padding)

  

  Each DIV has a margin, border & padding as per the image above that can be controlled from the CSS, for further information check W3.org or HTML Source

• CSS Positioning (Relative – Absolute – Fixed)

  Basically what you need to know is when you create a DIV it is positioned according to its place in the HTML flow (which is called static position), if you need to move it relative to that default position you would use relative positioning, if you want it to move to a specified position regardless of it place in the HTML you would use Absolute positioning, you need to note that absolute positioning is always relative to its parent not to the whole screen, to keep it fixed on the screen regardless of scrolling you would use the fixed positioning .

  for further information check W3 Schools

• Floats

  Floats is exactly as its name implies, it floats an element either left or right of it’s parent container, you can either float to the right or to the left, you may also clear floats – that is sort of (start a new row) – a good example of floats is Google image search, in a small screen you may have 4 results per row, if you have larger screen width you would have 6 or 7 results per row, that is each image floats to fit in the screen width available.

  for further information check Smashing Magazine or CSS Tricks

That  is all the basics a developer would need to know to move from normal Table-Based layouts to CSS(DIV)-based layouts.

Hope this helps out a bit 🙂

[digg=http://digg.com/programming/Crash_guide_in_Tableless_developmenth_Using_CSS_and_DIVs]