Såhär der det ut först:

#bakg2 {
width: 800px; height: auto;
margin: auto;
background-image:url(mitten.gif);
layer-background-image:url(mitten.gif);
}


Vidare har jag lagt två css boxar med innehåll, de ligger bredvid varandra...

#vanster {
width: 200px; height: auto; position: relative; left: 40px; top: 0px; margin-right: 20px;
}

#hoger {
width: 530px; height: auto; position: relative; top: 0px; float:right;
}

Jag har utelämnat menyer o grejer nu men det är ju såhär det ser ut i huvudsak.
Varför kan jag inte lägga en till css box nedanför #hoger utan att #vanster flyttas ner ett steg för varje rad i den? Finns det något bättre sätt att fixa det?

Whats wrong?

Testa att sätta float:left på din #vanster
Testa sedan att sätta clear:both; på din nya box som du lade till

Givetvis ska du wrappa in de boxar du anser behöva det. Man får se CSS som ett upp-och-nervänt tetris, alla block strävar efter att lägga sig uppåt och till vänster. Om du inte lägger en wrapper runt exempelvis din #vanster och din #hoger så finns ingen "ram" sin hindrar andra boxar nedanför från att hoppa upp och jäklas... :)

Tack Robert, mycket bra förklarat, försöker själv komma in i CSS-logiken, och har kommit en liten bit på väg, men det där hjälper faktiskt en nybörjare som mig =)