Problem with position in css - html

Question

Well i am developing a site and having trouble in CSS please help me to get rid of this issue.
You can see the following image for final results.
http://i51.tinypic.com/5bwpee.jpg
so i code like that
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
</div>
</div>
</div> <!-- #header -->
and CSS is .. actually in the following codes i use gradient image of and use pattern image to overflow the background.
#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;
}
so please kindly help me to solve this problem that how i set logo and author details in center of header..
i tried position but maybe it goes wrong.
Now i edited my code the results below, but still having problem
<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
</div>
</div>
CSS
#wrapper {
position:relative;
}
#header {
width:100%;
height:150px;
background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;
}
#pattern {
width:100%;
height:150px;
background:url(http://i51.tinypic.com/ao75eg.jpg) repeat;
position:absolute;
top:0px;
}
#main {
width:1200px;
margin:0 auto;
margin-top:-103px;
}
#main img {
z-index:5px;
}
after doing all this still having problem that the #pattern over all the layers. so please kindly help me to solve this issue.
Thank you all.

Answer 1

Create a div for your logo and sitename content.
Move the div towards the right with position:relative; left: 400px or whatever distance you need.
Float the logo and sitename to have them line up side by side.
Set the container div (#logoandsitename) to overflow:auto; to contain the floats.
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 -->
CSS
#logoandsitename {
overflow: auto;
width: 300px;
height: 100px;
position: relative;
left: 300px;
}
#logoandsitename img {
float:left;
}
#sitename {
float:left;
font-size: 40px;
}
That pretty much what you are looking for?

Answer 2

Why you need "width:1200px;" in #wrapper?
Why not you try this 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 -->
and this css:
#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;
}