Ами аз не използвам таблици. Най-вероятно е малко дървен подход, но аз им дефинирам точно определени места на nav и sectiona в body-to.

nav {
width:157px;
margin:22px 20px 20px 10px;
background-color:white;
opacity:0.9;
border-radius:15px;
padding:15px;
padding-top:10px;
padding-left:10px;
position:fixed;
}

section {
margin: 22px 20px 20px 222px;
}

section article{
width:auto;
background-color:white;
opacity:0.9;
border-radius:15px;
padding:15px;
margin-top:20px;
}

Правилният начин е да се използва float. Първо дефинираш размерите на всеки "блок" и след това им задаваш float:left/right в зависимост от позицията на "блока". Показвам с пример :). 

http://codepen.io/anon/pen/NPYjzM

Използвал съм проценти, за да бъде по-responsive. Оттук в последствие могат да се дефинират media queries за отделните големини дисплеи и т.н. Като цяло е добра практика да не се ползват фикснати размери, защото живеем в 2015, когато 60 и повече процента от потребителите преглеждат уеб съдържание през някакво мобилно устройство. :)

В моето решение използвам float за позициониране на <aside> и <section>.
Чрез float:left или float:right съответният елемент се залепя вляво или вдясно в пространството, което може да заеме.

Ето малко код, за да стане по-разбираемо:

aside{
    width:17%;
    min-width:170px;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    float:left;
    margin-left:2%;
    padding: 20px;
}

section{
    width:70%;
    min-width:700px;
    float:right;
    margin-right:5%;
}

Благодаря ви много за бързия отговор сега ще го пробвам :)

Аз освен float: left на едното и float:right на другото слагам и display: inline-block; и на двете

Здравейте,

  Може ли да ви задам още един въпрос.. как да направя всяка първа буква голямa..? (Color Kitchen)

Благодаря много :)

div:first-letter {
font-size: 45px;
}

Както и за всеки първи ред

div:first-line {
font-style: italic;
}

:)

Благодаря ви !!!