Two column div using simple CSS

This is a fairly simple post on how to align 2 <Div> in parallel to form a 2 column structure.
Imagine, I wish to create a blog system where on left should be an avtar pic while right part contains comment text. Keep it simple, imagine following HTML block:
<div style="float:left; padding-right:20px;">
                <div style="height:30px; width:50px; background-color:Red">avatar</div>
</div>
<div >     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br />
</div>
This HTML block renders as following:

This looks good. Watch for 3rd line of Lorum ipsum which wraps automatically below avatar pic. This might be an ideal design for many but some may like to see avatar and comment text in their own space (similar to  <TR><TD>avatar</TD><TD>Comment</TD></TR>). In context of above example, something like:

To achieve this, there is a very simple change we need. Just add “padding-bottom:100%” to first div:
<div style="float:left; padding-right:20px;padding-bottom:100%">
That’s it! It might be very useful when you are creating left navigation menu or anything where you wish to have 2 column structure.

CodeProject