I'm a bit new to table-less design
one problem in particular is bothering me.
If i want to have 2 columns somewhere on my page i use a float: left and a float:right
problem is that content beneath those 2 divs comes up and goes into the divs.

How do i stop that from happening?

insert a clearing div after the floats to break them.

<div style="clear:both;"></div>

for two column you don't need to float both divs. Let's say you have a left sidebar of 200px and a main content.
your code would be:

<div id="page">
   <div id="sidebar">My left sidebar</div>
   <div id="content">My main content</div>
</div>

and the css:

#sidebar {
   width: 200px;
   float:left;
}

#content {
   margin-left: 200px;
}

the margin-left is to prevent the content div to wrap around the sidebar if it expands beyond the height of the sidebar... i hope you understand. I'm not really good at explaining stuff.

the margin is calculated from the container above these 2?
clear:both sounds nice aswell


ps. anyway to get rid of using
-moz-box-sizing: border-box;
in everything which has padding?

in your example if content has less height then sidebar wouldn't anything beneath the content wrap beneath the sidebar?