Setting up div position - css

Question

I have a little problem as a css newbie. I'm creating theme for Getsimple Cms and there is one div I can't place where I want to.
I tried everything I know but only one thing that worked was deleting "menu" div, which actually cause all this problems.
Here's css code for both 'menu' and 'kontakt' div.
#kontakt {
float: right;
margin-top: 5px;
background-color: #c43131;
width: 236px;}
and
#menu {
float: left;
margin-top: 5px;
background-color: #c43131;
width: 759px;}
#menu ul {
float:left;
width:759px;
padding:0;
margin:0;
list-style-type:none;}
#menu a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#7A378B;
padding:0.2em 0.6em;
border-right:1px solid white;}
#menu a:hover {background-color:#ff9000;}
#menu li {display:inline;}
html here:
<div id="content">
<div id="menu">
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
</div>
<div id="con">
<div class="con-title"><h2><?php get_page_title(); ?></h2></div>
<div class="con-text"><?php get_page_content(); ?></div>
</div>
<div id="kontakt">
<img alt="Kontakt" src="<?php get_theme_url();?>/images/kontakt.png">
Sed ut perspiciatis unde
omnis iste natus error sit
voluptatem accusantium doloremque
laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae
vitae dicta sunt explicabo.
</div>
</div>

Answer 1

Try this:)
http://jsfiddle.net/736QQ/1/
I've just wrapped your content in Divs and floated them.
You should be able to work from this :)
<div id="header"></div>
<div id="left">
<div id="menu"></div>
<div id="con"></div>
</div>
<div id="right">
<div id="kontakt"></div>
</div>

Answer 2

In a nutshell, the div #menu is "taking up space" in that section of the page. This in turn will push down the following divs #con and #kontakt.

Answer 3

Also found this float div. Gives you the idea how float works and also be aware that paddings/margins affects the size of the div.
<div id="container">
<div id="menu"></div>
<div id="book">
<div id="column1" class="column_n">
<ul>
<li>Home</li>
</ul>
</div>
<div id="column2" class="column_n"></div>
</div>
body {
margin: 0 auto;
padding: 0;
border: 0;
font-family: Verdana;
font-size: 20px;
}
.column_n {
background: red;
border: 1px solid black;
width: 40%;
height: 100px;
margin: 20px;
float: left;
}
http://jsfiddle.net/e9a7w/1/