title: Positioning a Div at the center of the web page bneath a div
body: <p>I have a webpage which contains a header at the top.</p>
  
  <p>Beneath to which is another div that i want to position at the center of the screen with width <code>960px</code> but the second <code>div</code> is displaying to the far right.</p>
  
  <p>Also there are dropdown menu in header menu,that too is not click-able.</p>
  
  <p>Here is the sample HTML..</p>
  
  <pre><code> &lt;div class="header-wrapper"&gt;
     //Mark up for header with drop-down.
   &lt;/div&gt;
  
   //Second Div ..
   &lt;div id="slideshow-carousel" class="center"&gt;               
  
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS..</p>
  
  <pre><code>.header-wrapper {
    background: url("../img/new_images/bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    z-index: 60001;     
    width: 100%;
    height: 77px;
    margin: 0 auto; 
  }
  
  
  .center {
    margin-left:auto;
    margin-right:auto;
    width:960px;; 
  }
  </code></pre>
  
  <p>Full markup for second DIV</p>
  
  <pre><code>&lt;div id="slideshow-carousel" class="center"&gt;                
          &lt;ul id="carousel" class="jcarousel jcarousel-skin-tango"&gt;
              &lt;li&gt;&lt;a href="#" rel="p1"&gt;&lt;img src="img/new_images/.jpg" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" rel="p2"&gt;&lt;img src="img/new_images/.jpg" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" rel="p3"&gt;&lt;img src="img/new_images/.jpg" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" rel="p4"&gt;&lt;img src="img/new_images/.jpg" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" rel="p5"&gt;&lt;img src="img/new_images/" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" rel="p6"&gt;&lt;img src="img/new_images/web.jpg" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" rel="p7"&gt;&lt;img src="img/new_images/.jpg" width="960" height="583" alt="#"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is the complete CSS</p>
  
  <pre><code> .center
          {
              margin-left:auto;
              margin-right:auto;
              width:960px; 
              height: 565px;
          }
  
  
          #slideshow-carousel {
  
              width:960px;
              position:relative
          }
  
          #slideshow-carousel ul {
              margin:0; 
              padding:0;
              list-style:none;
          }
  
          #slideshow-carousel li {
              background:#fff; 
              height:583px; 
              position:relative
          }
  
          #slideshow-carousel li .arrow {
              left:3px; 
              top:28px; 
              position:absolute; 
              width:20px; 
              height:40px; 
              background:url(images/arrow_white.png) no-repeat 0 0; 
              display:block;
          }
  
          #slideshow-carousel li a {
              background:#000; 
              display:block; 
              width:960px; 
              height:583px;
          }
  
  
          #slideshow-carousel .active {
              filter:alpha(opacity=100); 
              -moz-opacity:1.0; 
              -khtml-opacity: 1.0; 
              opacity: 1.0;
          }
  
          #slideshow-carousel .faded {
              filter:alpha(opacity=50); 
              -moz-opacity:0.5; 
              -khtml-opacity: 0.5; 
              opacity: 0.5;
          }
  </code></pre>
  
  <p>And </p>