Html css中的位置问题

嗯，我正在开发一个网站，在CSS中遇到问题，请帮助我摆脱这个问题

您可以看到下图了解最终结果

所以我是这样编码的

<div id="header">
    <div class="pattern"></div>  <!-- .pattern -->
    <div id="wrapper">
        <div class="topHeader">

        </div>
    </div>
</div> <!-- #header -->

所以，请帮助我解决这个问题，我如何设置标题中心的标志和作者详细信息

我试过这个姿势，但可能出了问题

---

现在我编辑了下面的代码，但是仍然有问题

<div id="wrapper">
    <div id="header"></div>
    <div id="pattern"></div>
    <div id="main">
        <img src="http://i52.tinypic.com/16i6z9d.jpg" />
    </div>
</div>

在做了所有这些之后，仍然有一个问题，即#模式覆盖了所有层。所以请帮我解决这个问题

---

谢谢大家。

为您的徽标和sitename内容创建一个div。 使用

位置：相对向右移动div；左：400px

或您需要的任何距离。
浮动徽标和sitename，使它们并排排列。 将容器div（

#logo和sitename

）设置为

溢出：自动以包含浮动

HTML

<div id="header">
    <div class="pattern"></div>  <!-- .pattern -->
        <div id="wrapper">
        <div class="topHeader">
            <div id="logoandsitename">
                <img src="img.source" />
                <span id="sitename">Your Site Name</span>
            </div>
         </div>
     </div>
</div> <!-- #header -->

这正是您想要的吗？
为什么需要在包装器中使用“宽度：1200px；”

为什么不试试这个html呢

<div id="header">
    <div id="wrapper">
        <div class="topHeader">
            <div id="logo">Logo</div>
            <div id="author">Author Details</div>
        </div>
    </div>
    <div class="pattern"></div>  <!-- .pattern -->
</div> <!-- #header -->

徽标和作者详细信息位于哪个部门？或者你还没有把它们放进去吗？你的标识和作者详细信息的HTML在哪里？你的更新似乎是一个完全不同的问题。你的第一个问题得到回答了吗？
<div id="header">
    <div class="pattern"></div>  <!-- .pattern -->
        <div id="wrapper">
        <div class="topHeader">
            <div id="logoandsitename">
                <img src="img.source" />
                <span id="sitename">Your Site Name</span>
            </div>
         </div>
     </div>
</div> <!-- #header -->

#logoandsitename {
    overflow: auto;
    width: 300px;
    height: 100px;
    position: relative;
    left: 300px;
}

#logoandsitename img {
    float:left;
}

#sitename {
    float:left;
    font-size: 40px;
}

<div id="header">
    <div id="wrapper">
        <div class="topHeader">
            <div id="logo">Logo</div>
            <div id="author">Author Details</div>
        </div>
    </div>
    <div class="pattern"></div>  <!-- .pattern -->
</div> <!-- #header -->

#header {
    width:100%;
    height:150px;
    background:url(images/header_gradient.png) repeat-x;
}

.pattern {
    width:100%;
    height:150px;
    background:url(images/header_transparent.png) repeat;
}

#wrapper {
    width:1200px;
    margin:0 auto;
    background-color:#F00;
    height:100px;
}
#logo, #author{
    width:200px;
    height:50px;
    float:left;
}
#author{
margin-left:20px;
}
.topHeader{
    width:500px;
    margin:0 auto;
}