设置div位置

Question

作为一名新手，我有一点问题。我正在为Getsimple Cms创建主题，并且有一个div我不能放在我想要的位置。

我尝试了我所知道的一切，但只有一件事是删除“菜单”div，这实际上导致了所有这些问题。

这是“menu”和“kontakt”div的css代码。

#kontakt {
float: right;
margin-top: 5px;
background-color: #c43131;
width: 236px;}

和

#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：

<div id="content">

<div id="menu">

    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></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

试试这个：）

<强> http://jsfiddle.net/736QQ/1/

我刚刚把你的内容包裹在Div中并将它们浮起来。

你应该可以从这开始：）

<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

简而言之，div #menu在页面的那一部分是“占用空间”。这反过来将推倒以下div #con和#kontakt。

Answer 3

还找到了这个浮点div。给出了浮点数如何工作的想法，并且还要注意填充/边距会影响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/