Преобразование табличного макета в макет div

Question

Я новичок в HTML & CSS. Я изучил веб-дизайн с помощью табличных тегов. Теперь я изучаю дизайн без таблиц с использованием тегов div. Теперь я конвертирую свой старый веб-сайт в новый, используя теги div. У меня проблема в моем дизайне. Я размещаю табличный тег, который отлично работает и новый код в теге div, который не является точным, как старый. Пожалуйста, скажите мне, где я ошибаюсь.

Новый дизайн, который работает отлично:

Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/ 

Новый дизайн, который не является точной старый:

Visit http://jsfiddle.net/rizwan1969/8vpyk815/ 

Как я могу достичь такой же внешний вид без использования таблиц?

Answer 1

Вы находитесь рядом, когда вы используете divs, вы должны быть осторожны с тем, что вы накладываете на внешние div, потому что они также сохраняются верно для внутренних div, так что вы хотите что-то вроде этого:

#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; 
} 

и добавить содержимое DIV, чтобы отделить заголовок от текста:

<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 скрипку: http://jsfiddle.net/8vpyk815/2/

вы также должны быть осторожны всех й e random paddings заставляют их затруднять работу с элементами внутри других элементов.