dlaczego używając znaczników html5 nie są tak łożone na stronie?

używam znaczników z html5 np. header, article, section, aside, nav. nie wiem dlaczego ale strona się tak nie układa jak na poniższym obrazku?
http://www.fotosik.pl/pokaz_obrazek/f44e42fb0a7d59e8.html
szczególnie interesuje mnie te dwie kolumny obok siebie.

Dlaczego ma się tak układać?
Gdzie Ty te znaczniki znalazłeś?

na tej stronie http://msdn.microsoft.com/pl-pl/library/struktura-dokumentu-i-nowe-elementy-html5.aspx

to są tylko znaczniki, ich nazwy sugerują jak powinny być użyte (np <nav> do nawigacji) ale samo użycie w kodzie html nie ułoży Ci ich na stronie. Od tego masz CSS aby zadbać o wygląd strony.

czego powinienem użyć aby były dwie kolumny section obok siebie?

HTML odpowiada tylko za skład tekstu, nie za jego prezentację (kolomny, kolory, pogrubienia, itp.)
Za prezentację odpowiada CSS (cascade style sheet)

Zacznij od tego:
http://www.w3schools.com/html/DEFAULT.asp
http://www.w3schools.com/css/default.asp

jakich znaczników CSS powinienem użyć? próbowałem z ustawieniem rozmiaru ale nie wychodzi.

Po prostu zacznij od podstaw, jakiś kurs na temat html/css

Nowe znaczniki możesz spokojnie potraktować jak stare, jeśli chodzi o ostylowanie

Ja bym skupił się na tym czym jest ID, a czym KLASA w CSS oraz atrybutach:
display, float, width, height, margin (0 auto), position, aby uzyskać podaną strukturę.

Aby ustalić rozmiar niektórych elementów należy ustalić im atrybut display: block;. Inaczej nie załapie.
Aby zobaczyć co się dzieje i jak zmienia/wygląda, polecam po prostu pokolorować dany element. (background: kolor)

Fajnie można się tego nauczyć z codeschool.com
Sam kurs jest płatny i niedostępny dla darmowych użytkowników, ale można uzyskać nawet na miesiąc konto premium.

Wyszukaj " codeschool hall pass " , kurs to " CSS Cross-Country "