Converting Tabular layout into div layout - html

Question

I am new in HTML & CSS. I learned web design using table tags. Now i am learning table-less design using div tags. I am now converting my old designed website to new one using div tags. I am having a problem in my design. I am posting table tag which is working fine and new code in div tag which is not accurate as old one. Kindly tell me where I am having mistake.
New design which is working fine:
Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/
New design which is not accurate as old:
Visit http://jsfiddle.net/rizwan1969/8vpyk815/
How can I achieve the same look without using tables?

Answer 1

you're sorta close, when you're using divs, you have to be careful of what you put on the outside divs, because they also hold true for the inner divs, so what you want is something like this:
#right_col {
width:260px;
/* padding:5px; */
background-color:#999900;
float:left;
line-height:18px;
font-size:12px; color:#FFFFFF; text-align:justify
}
#heading
{
font-size:16px;
color:#FFFFFF;
padding:10px;
background-color:#030;
display:block;
}
.content {
padding:7px;
}
and add a content div to separate the header from the text:
<div id="right_col">
<strong id="heading">QUAID'S MESSAGE</strong>
<div class="content">
<img src="images/quaid-2.jpg" align="left" style="margin-right:5px; border: 1px solid #006600; "/> "Pakistan is proud of her youth, particularly the students, who are nation builders of tomorrow. They must fully equip themselves by discipline, education, and training for the arduous task lying ahead of them."
</div>
</div>
heres the fiddle: http://jsfiddle.net/8vpyk815/2/
you also should be careful of all the random paddings cause they can make working with elements inside other elements difficult