-1

I have a webpage which contains a header at the top.

Beneath to which is another div that i want to position at the center of the screen with width 960px but the second div is displaying to the far right.

Also there are dropdown menu in header menu,that too is not click-able.

Here is the sample HTML..

 <div class="header-wrapper">
   //Mark up for header with drop-down.
 </div>

 //Second Div ..
 <div id="slideshow-carousel" class="center">               

 </div>

CSS..

.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;; 
}

Full markup for second DIV

<div id="slideshow-carousel" class="center">                
        <ul id="carousel" class="jcarousel jcarousel-skin-tango">
            <li><a href="#" rel="p1"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p2"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p3"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p4"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p5"><img src="img/new_images/" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p6"><img src="img/new_images/web.jpg" width="960" height="583" alt="#"/></a></li>
            <li><a href="#" rel="p7"><img src="img/new_images/.jpg" width="960" height="583" alt="#"/></a></li>
        </ul>
    </div>

And here is the complete CSS

 .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;
        }

And

user3699193
  • 27
  • 1
  • 8

2 Answers2

0

Your div is a block element which takes up the entire available window width. hence there is no space left to center align it. simply give it a width less than window width and it'll automatically center align according to your current css.

Side note: don't forget to add a height or content otherwise you won't see the <div> at all..

T J
  • 42,762
  • 13
  • 83
  • 138
  • I want the second div to show with a width of `960px` and align center to all screens regardless of the screen size till it width applicable – user3699193 Jun 04 '14 at 13:35
  • @user3699193 since you have set `margin-left` and `margin-right` to `auto`, it'll automatically center align horizontally in larger screens... – T J Jun 04 '14 at 13:37
  • Then why is it not happening in my medium size screen – user3699193 Jun 04 '14 at 13:43
  • @please share the exact html and css you have. in the shared html & css you don't have any content, you haven't set the height either. so nothing will be visible. why it's not happening in your screen depends on what your actual code is – T J Jun 04 '14 at 13:45
  • http://jsfiddle.net/NAJu6/ Please see this fiddle demo.My condition is like this only .My second div is going to the extreme right of the web page that i need to position at the center of the webpage with width of `960px` .. – user3699193 Jun 04 '14 at 13:46
  • @user3699193 like i said, [it's already centered](http://jsfiddle.net/NAJu6/1/embedded/result/) – T J Jun 04 '14 at 13:52
  • Ok Sir .As per fiddle link jsfiddle.net/NAJu6 ,if i have to show to the second div at the center of the current screen without scrolling horizontal how can i do it? – user3699193 Jun 04 '14 at 14:02
0

Try this:

CSS

.center
{
    display: block;
    margin: 0px auto;
    width:960px; //Edit the size you want
    text-align: center;
}

HTML

<div class="header-wrapper">
      //Mark up for header with drop-down.
</div>

<div id="slideshow-carousel" class="center">               
      //Second div
</div>

DEMO HERE

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
  • My present webpage is just like yours ..Instead of showing to the `slideshow-carousel` to the extreme right i want to show it at the center of the screen ..Please help me to get it.. – user3699193 Jun 04 '14 at 13:41
  • Can you help me in this? – user3699193 Jun 04 '14 at 13:52
  • Please use the jsfiddle to represent your html markup and css and i will help you – Luís P. A. Jun 04 '14 at 13:54
  • Ok Sir .With your fiddle link http://jsfiddle.net/NAJu6/ ,if i have to show to the second div at the center of the current screen without scrolling horizontal how can i do it? – user3699193 Jun 04 '14 at 14:01
  • You must see that you setting 960px of witdh...in the fiddle you can expect a horizontal scroll, because the window size is smaller. If you set percentage you get no horizontal scrool - http://jsfiddle.net/NAJu6/2/ – Luís P. A. Jun 04 '14 at 14:06
  • Ok Sir i am testing it in my browser screen too at the same time but there also getting after the horizontal scroll – user3699193 Jun 04 '14 at 14:08
  • Maybe the problem is not the second div...but i'm not sure because i can´t see what you are seeing with real html markups and css. If you give me a url where i can see what you see, maybe i will fix it :) – Luís P. A. Jun 04 '14 at 14:13
  • You don´t need just put in a free host...upload you files by ftp – Luís P. A. Jun 04 '14 at 14:20
  • Ok sir suppose i want to add a div with width `960px` at the center of the screen .How can i do this – user3699193 Jun 04 '14 at 14:21
  • I am sorry to tell but have no idea of the same – user3699193 Jun 04 '14 at 14:22
  • I have upadated my post with the complete Markup for the second div and its CSS>PLease help. – user3699193 Jun 04 '14 at 14:30