Full page with header and menu - html

Question

I am trying to do a css for this particular layout (with Twitter Bootstrap), I was to able to generate a header but not the full page version. What I want to achieve is like this
http://jsfiddle.net/9gwZf/ where after few top pixels of content will menu and header (in full width) will lie. How will I be able to achieve this kind of layout? Please help me out.
HTML
<div class="container">
<div class="main-header-wrapper">
<ul class="menu-list">
<li>HOME </li>
<li>ABOUT US</li>
<li>Help</li>
<li>Menu 4</li>
<li>Juf</li>
<li>Kish</li>
</ul>
<div class="header-center-wrap">
<img src="img/contact.PNG" />
</div>
</div>
<div class="row-fluid">
<!-- Bigger content -->
<div class="span8">
<!--Body content-->
</div>
<!-- Sidebar (Right) -->
<div class="span4">
<!--Sidebar content-->
<h5>For inquiries contact us, contact us at</h5>
<table style="width: 300px;">
<tr>
<td>OFFICE ADDRESS</td>
<td>100F Building Name</td>
</tr>
<tr>
<td>INFORMATION</td>
<td>[phone]</td>
</tr>
<tr>
<td>FAX</td>
<td>[phone]</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>WEBSITE</td>
<td>www.website.com</td>
</tr>
</table>
</div>
</div>
</div>
CSS
#font-face{
font-family:PT Sans Narrow;
src:url('PT Sans Narrow.ttf');
}
body {
background: url('../img/bg.png');
font-size: 11px;
font-family:'PT Sans Narrow';
}
.container {
width: 1024px;
}
.main-header-wrapper {
position: relative;
width: 100%;
display: block;
margin-left: 0;
margin-right: 0;
margin-top: 40px;
overflow: hidden;
padding: 0;
float: left;
}
.header-center-wrap {
width: 1284px;
height: 223px;
margin: 0;
background: #fff;
color: #fff;
font-weight: bold;
}
.row-fluid {
margin-top: 20px;
-moz-border-radius: 8px;
border-radius: 8px;
border:1px solid #eee;
background: #fff;
box-shadow: 3px 3px 1px #888888;
}
ul.menu-list {
position:relative;
height:30px;
background:#000;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
background: url('../img/menu_strip.jpg') repeat-x;
}
ul.menu-list li {
margin:0;
height:30px;
font-size:10px;
text-align:center;
color:#fff;
width:auto;
float:left;
cursor:pointer;
font-weight:700;
}
ul.menu-list li a,ul.menu-list li a:link,ul.menu-list li a:visited,ul.menu-list li.active {
text-align:center;
color:#fff;
font-weight:700;
font-size:10px;
text-decoration:none;
padding: 7px 4px 10px;
display:block;
height:29px;
text-transform: uppercase;
}
ul.menu-list li:hover {
background:#151515;
}
h5 {
color: navy;
}

Answer 1

Pull the nav bar out of the container, which has a set width and position it separately.

Answer 2

You just need to re-arrange your HTML a little
<div class="container">
<div class="main-header-wrapper">
<ul class="menu-list">
<li>HOME </li>
<li>ABOUT US</li>
<li>Help</li>
<li>Menu 4</li>
<li>Juf</li>
<li>Kish</li>
</ul>
</div> <!-- ends container width -->
<div class="header-center-wrap"> <! -- auto 100% wide -->
<img src="img/contact.PNG" />
</div>
<div class="container"> <!-re-establish container width -->
<div class="row-fluid">
<!-- Bigger content -->
<div class="span8">
<!--Body content-->
</div>
<!-- Sidebar (Right) -->
<div class="span4">
<!--Sidebar content-->
<h5>For inquiries contact us, contact us at</h5>
<table style="width: 300px;">
<tr>
<td>OFFICE ADDRESS</td>
<td>100F Building Name</td>
</tr>
<tr>
<td>INFORMATION</td>
<td>[phone]</td>
</tr>
<tr>
<td>FAX</td>
<td>[phone]</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>WEBSITE</td>
<td>www.website.com</td>
</tr>
</table>
</div>
</div>
</div>