Cannot Center Nav and wrong width showing

Question

So this is eating the life out of me and I simply cannot figure it out. PLEASE HELP! I cannot get the menu to sit in the centre or even appear in the 960 width of the parent div. Here is the html and CSS

</head>

    <body>
            <div id="container">
                <div id="header">
                    <div id="logo"> <img src="images/logo.png"></div>
                        <div id="contact"> Tel: 011 234 5678<br>
                                            E-mail: info@domain.co.za</div>
                            <div id="secure">We accept the following via PayFast<img src="images/secure.png"></div>
                                <div id="nav">
                                <ul class="navbars">
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Information</a>
            <ul>
               <li><a href="#">Accreditations</a></li>
               <li><a href="#">Electricity Savings</a></li>
               <li><a href="#">Colour Temp</a></li>
            </ul>         
         </li>
         <li><a href="#">Products</a>
            <ul>
               <li><a href="#">LED downlights</a></li>
               <li><a href="#">LED strip lights</a></li>
               <li><a href="#">LED floodlights</a></li>
               <li><a href="#">Power Supplies</a></li>
            </ul>         
         </li>
         <li><a href="#">Online Shopping</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
                                </div>
                </div>
                <br>
                <div id="slider" class="nivoSlider">
<img src="images/slide1.png" alt="" />
<a href="#"><img src="images/slide2.png" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.png" alt="" title="This is an example of a caption" />
<img src="images/slide4.png" alt="" />

                        <div id="bulbshow"><img src="images/bulbshow.jpg"></div>
                                    <div id="secure2">We accept the following via PayFast<img src="images/secure.png"></div>


                <div id="footer">© Copyright 2014. All Rights Reserved, Company CC. Website designed and developed by <a href="http://www.domain.co.za"><img class="gi" src="images/gifavicon.png"></a><br>Reproduction in any form without express permission is prohibited.</div>

            </div>

</body>
    </html>



    html {
    background-image: url(../images/tile.jpg);
    background-repeat: repeat;
}

a:hover {
    text-shadow: 1px 1px 1px #e5e61d;
}
    a:active {
    background: #27428a;
}

#container {
    width:960px;
    margin: 0 auto;
}

#header {
    display: block;
    width:100%;
}

#logo {
    display: inline-block;
    width:20%;
    float: left;
}

#contact {
    display: block;
    width:80%
    float: left;
    text-align: right;
    padding-bottom: 1%;
}

#secure {
    display: inline-block;
    width: 80%;
    float: left;
    text-align: right;
    padding-bottom: 2%;

}

#nav {
    display: inline-block;
    width: 940px;
    line-height: 100%;
    text-align: center;
    font-size: large;
    margin-left: 0 ; /* Ensures there is no space between sides of the screen and the menu */
    margin-right:0;
    z-index: 99; /* Makes sure that your menu remains on top of other page elements */
    position: relative; 



}
ul.navbars {
width:960px;
}

.navbars    {
    height: 30px;
    width:960px;
    float: left;
    margin: 0px;
    border-right: 0px solid #54879d; 
    }

.navbars li     {
            height: auto;
            width: 160px;  /* Each menu item is 150px wide */
            float: left;  /* This lines up the menu items horizontally */
            text-align: center;  /* All text is placed in the center of the box */
            list-style: none;  /* Removes the default styling (bullets) for the list */
            font: normal 15px "Trebuchet MS", Helvetica, sans-serif, "Lucida Sans Unicode"; 
            background: -webkit-linear-gradient(#0063d3, #27428a); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#0063d3, #27428a); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#0063d3, #27428a); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#0063d3, #27428a); /* Standard syntax */
                        }

.navbars a  {                           
        padding: 18px 0;  /* Adds a padding on the top and bottom so the text appears centered vertically */
        border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */
        border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */
        text-decoration: none;  /* Removes the default hyperlink styling. */
        color: white; /* Text color is white */
        display: block;
        }

.navbars li:hover, a:hover {background:#8080B5;
    } 

.navbars li ul  {
        display: none;  /* Hides the drop-down menu */
        height: auto;                                   
        margin: 0; /* Aligns drop-down box underneath the menu item */
        padding: 0; /* Aligns drop-down box underneath the menu item */         
        }               

.navbars li:hover ul    {
                        display: block; /* Displays the drop-down box when the menu item is hovered over */
                        }
 .navbars li ul li {background-color: #54879d;} 

 .navbars li ul li a    {
        border-left: 1px solid #1f5065; 
        border-right: 1px solid #1f5065; 
        border-top: 1px solid #74a3b7; 
        border-bottom: 1px solid #1f5065; 
        }

.navbars li ul li a:hover   {background-color: #00006B;}




#bulbshow {

}

#secure2 {
    text-align: right;
}

#footer {
    text-align: center;
    color: #fff;
    background: -webkit-linear-gradient(#0063d3, #27428a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0063d3, #27428a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0063d3, #27428a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0063d3, #27428a); /* Standard syntax */
    font-size: small;
    font-family: "Trebuchet MS", Helvetica, sans-serif, "Lucida Sans Unicode";
    height: 100%;
}

.gi {
    width:2em;
}

This is just HTML, which doesn't help. Also a [jsfiddle](http://jsfiddle.net/) would help too! — Hanna, Jun 17 '14 at 17:36
Please forgive me, I am quite new to all this... here is the fiddle?http://jsfiddle.net/46M3x/ — Sash, Jun 17 '14 at 17:45
possible duplicate of [How to horizontally center a div in a div?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div) — apaul, Jun 17 '14 at 20:46

arielnmz · Accepted Answer · 2014-06-17T20:16:31.050

1

There are many solutions to center a div, two of them are:

Using auto margins:

HTML:

<div id="Container">
    <div id="Nav"></div>
</div>

CSS:

#Container {
    width: 500px;
    height: 40px;
    background: #444444;
    overflow: hidden;
}

#Nav {
    width: 200px;
    height: 20px;
    background: #CCCCCC;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

Using absolute margins:

HTML (is the same)

CSS:

#Container {
    width: 500px;
    height: 40px;
    background: #444444;
    overflow: hidden;
}

#Nav {
    width: 200px;
    height: 20px;
    background: #CCCCCC;
    margin-left: 150px;
    margin-top: 10px;
}

As you can see, you can't center a div vertically using auto top and bottom margins, so if you want to center your div vertically, you have to make a substraction, and add ½ of it to the top margin, for example.

Another approach (and not so recommended) is setting the inner div's display atribute to inline-block and setting the container's text-align attribute to center. Like this:

Inline block techique:

#Container {
    width: 500px;
    height: 40px;
    background: #444444;
    overflow: hidden;
    text-align: center;
}

#Nav {
    display: inline-block;
    width: 200px;
    height: 20px;
    background: #CCCCCC;
}

This effectively breaks the margin-top setting, so you couldn't center your div vertically. In this case, you may want to set the parent's vertical-align attribute to middle, but you should also set its display attribute to table and the child's display attribute to table-cell, since this only works with tables and div-tables.

Update:

You may as well have to check the padding and margin values for your div, ul and li elements, since most browsers provide them with default values. Make sure they're set to 0px if you want to get rid of undesired spaces;

edited Jun 17 '14 at 20:16

answered Jun 17 '14 at 17:53

arielnmz

8,354
9
38
66

I am probably missing the point here. Could you make it work in the fiddle? http://jsfiddle.net/46M3x/ – Sash Jun 17 '14 at 17:59
Could you please provide a simplified version of your fiddle? with only the essential parts of your problem. It's hard to debug other people's code since I don't even know what you want to achieve (other than a centered div). – arielnmz Jun 17 '14 at 18:03
The "container" has an overall width of 960px as seen. The problem is, the nav seems to be running a few pixels outside this. If you compare the position of the nav in relation to the footer, you will see the nav is slightly more to the right – Sash Jun 17 '14 at 18:06
Please remove everything but your nav and your reference bar from your fiddle, and please correct your indentation. – arielnmz Jun 17 '14 at 18:10
Sorry Ariel. Done and Done. You will now be able to see in the result what the problem is with the nav – Sash Jun 17 '14 at 18:13
You're missing the point of **simplified version** , it's still a copy-paste of your code. Maybe while cleaning up your code you stumble upon the solution to your problem. Please refer to this: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) – arielnmz Jun 17 '14 at 18:21
Ok I left only the Nav, Footer and its related CSS http://jsfiddle.net/46M3x/3/ – Sash Jun 17 '14 at 18:28
Check your `padding` values. They should be `0px` for the `ul` and the `li` elements. – arielnmz Jun 17 '14 at 19:00
Are you sure? do you manually set the padding to `0px 0px 0px 0px;` for `li` and `ul`. Because they have values set by default. – arielnmz Jun 17 '14 at 19:52
Aha! I didn't have that set on the #navbar. Thank you! I wasn't even aware of default values. Thanks again! – Sash Jun 17 '14 at 20:13
Just put that comment on a separate response so I can mark as answered. Many thanks! – Sash Jun 17 '14 at 20:14

Cannot Center Nav and wrong width showing

1 Answers1