position absolute is not working - html

Question

How can I set the div #gallery in the center of the div #warp? Here is a demo JS Fiddle.
HTML:
<div id="warp">
<div id="header">
<img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
<img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
<div id="menu">
<li>About Us
<li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
<li><a href="#" name="profile" title="Profile" > Profile</a></li>
</div>
</div>
<div id="gallery"></div>
</div>
CSS:
html body{
margin:0;
padding:0;
}
body{
background:#F7F7F7;
}
#warp{
position:relative;
margin:0 auto;
}
#header {
position:relative;
background:#DEEAF4;
width:80%;
height: 100px;
margin:0 auto;
}
#logo_l{
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
#Logo_r{
position:absolute;
width:272px ;
height:100px;
right:0;
top:0;
margin:0;
padding:0;
}
#menu li {
display: block;
vertical-align: top;
float:left;
margin: 0 5px;
}
#menu {
position:relative;
width:250px;
top: 35px;
margin: 0 auto;
}
#gallery{
position:absolute;
background:#EBF0F5;
width:80%;
height:70%;
margin:10px auto;
padding:10px;
}
​

Answer 1

You do not need to include position: absolute to center #gallery. This will already be achieved with margin: 10px auto.
Further, to set a percentage height to #gallery, its parent element must have a specific height. In this case, I assume you want it to be based on viewport height. To do so, every ancestor div must have a height of 100%:
*, html, body, #warp {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/qc9WL/1/
NOTE: I also noticed that there are some bugs in your HTML and CSS.
You need a comma between body and html in line one of your style sheet
You should use <ul> or <ol> tags when making lists
Lastly, don't forget to close your <li> in line six

Answer 2

I'm not sure what you are trying to achieve here - position: absolute on the #gallery is exactly what's causing the problem (that's why margin: 10px auto is not working). If you remove it, the #gallery element will be in the centre.
Also, you could center horizontally an absolutely positioned element of known width by setting left: 50%; and margin-left: -40%; (-40% in this case, because you have the width for #gallery set to 80%)

Answer 3

Since you are specifying gallery width in percentage, why don't you try setting the left and right margin in percentage?
margin: 10px 10%;
places the division at center