CODEWITHSUNDEEP
htmlcss
user2417012
user2417012

Reputation: 33

Center div; not working well

I have read through many posts on this site and other things on the internet about centering a div.

To the left of my div there's a white space that I can't fix.

Here's the Jsfiddle http://jsfiddle.net/ZYfaY/

So far I have tried

div#navigation-head{
background-image:url('img/head.png');
text-align: center;
width: 100%;
height: 2em;
position: fixed;
top: 0;
left:auto;
right:auto;

}

Upvotes: 0

Views: 52

Answers (3)

leoMestizo
leoMestizo

Reputation: 1499

Most of the elements have default properties, product of UA's stylesheet (where UA means User Agent). If you inspect the body element, for example, you'll see that he has properties by default.

You have to reset those properties.

A good practice is including a Reset CSS.

For example:

/* Reset CSS */

body, div, section, nav, ... {
   margin: 0;
   padding: 0;
}

a { text-decoration: none; } /* If you will eliminate the underline for all `a` elements */

/* The rest of reset properties */

How to include a Reset CSS?

One option is "call him" in the head element:

<head>
 <!-- I assume that reset.css is in *css folder* -->
 <style>
  @import url("css/reset.css") screen
  @import url("css/style.css") screen
 </style>
</head>

Or "call him" from your principal stylesheet, for example:

/* Style CSS */

@import url("reset.css") screen; /* I assume that style.css and reset.css are in the same folder */

Your problem is that in your code, your body have a margin by default and you didn't reset that default property. You have to eliminate putting:

body {
   margin: 0;
   padding: 0;
}

Here's a DEMO

Be good, Leonardo

Upvotes: 0

Nick R
Nick R

Reputation: 7784

It's the default padding the browser adds to the body tag.

You can zero this out, by doing 

body { margin:0; padding:0; }

Or better yet, use a reset stylesheet before your main styles, that way you're working from a consistent base-line - http://meyerweb.com/eric/tools/css/reset/

JSFiddle Demo

Upvotes: 2

Dominic Green
Dominic Green

Reputation: 10260

You need to clear the basic padding and margin from your html use this 

body{margin:0;padding:0;}

Example is here http://jsfiddle.net/ZYfaY/3/

Upvotes: 1

Related Questions