css - 设置div位置

Question

作为一个 CSS 新手，我遇到了一些小问题。我正在为 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/

我刚刚将您的内容包装在 Divs 中并使它们 float 。

你应该可以从这里工作:)

<div id="header"></div>

<div id="left">
    <div id="menu"></div>
    <div id="con"></div>
</div>

<div id="right">
    <div id="kontakt"></div>
</div>