A div in my HTML code is floating 72 pixels from the top of the screen

Question

Right now I'm developing a website for an assignment, but whilst the primary (id 'main') div is on top, the div for my header is 72 pixels from the top of the screen. I've checked, and I can't find any padding or margin issues. Below is a copy of both the HTML and CSS I'm using.

I've tried making the top margin -72px, which works, but means that the rest of the divs require the same thing, making it a recurring issue.

Below is a copy of both the HTML and CSS I'm using.

<!DOCTYPE html>

<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="main">
  <div id="title">
    <p id="heading"> GC <br>
  Woodturning </p>
  </div>
</div>
</body>
</html> 




body {
    background-image: url('images/wood%20grain.jpg');
    margin: 0px;
}
#main {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    padding-top: 0px;
}
#title {
    width: 1024px;
    height: auto;
    background-image: url('images/heading.jpg');
    margin: 0px auto auto 0px;
    padding: 0px;
}
#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

Have you examined this in Firefox or Chrome's "inspector" mode (Ctrl+Shift+I) "box model" tab? If not, get thee hence forthwith. — Jim Garrison, Feb 16 '16 at 07:00

score 1 · Accepted Answer · answered Feb 16 '16 at 07:05

You need to add margin: 0; to your heading. This because the most browsers will automatically add this to a p element:

p {
    display: block;
    margin-before: 1em;
    margin-after: 1em;
    margin-start: 0px;
    margin-end: 0px;
}

So edit your CSS to:

#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
    margin: 0; /* This is new */
}

DDan · Answer 2 · 2016-02-16T07:10:22.370

0

Add margin: auto to your #heading css description

See example: Fiddle here

#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
    font-weight: bold;
    color: #FFF;
    margin: auto;  /* <-- Added this */
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

edited Feb 16 '16 at 07:10

answered Feb 16 '16 at 07:00

DDan

8,068
5
33
52

score 0 · Answer 3 · answered Feb 16 '16 at 07:03

Add margin: auto; in you #heading{} id.It should solve your problem.

body {
  background-image: url('images/wood%20grain.jpg');
  margin: 0px;
}
#main {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  padding-top: 0px;
}
#title {
  width: 1024px;
  height: auto;
  background-image: url('images/heading.jpg');
  margin: 0px auto auto 0px;
  padding: 0px;
}
#heading {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 72px;
  padding-left: 100px;
  padding-bottom: 10px;
  font-weight: bold;
  color: #FFF;
  margin: auto;
  /* <-- Please Add */
  text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

<div id="main">
  <div id="title">
    <p id="heading">GC
      <br>Woodturning</p>
  </div>
</div>

score 0 · Answer 4 · answered Feb 16 '16 at 07:07

Please replace your #heading css rule try this

#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
margin-top:0;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;

}

 

Right now I'm developing a website for an assignment, but whilst the primary (id 'main') div is on top, the div for my header is 72 pixels from the top of the screen. I've checked, and I can't find any padding or margin issues. Below is a copy of both the HTML and CSS I'm using.

<!DOCTYPE html>

<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="main">
  <div id="title">
    <p id="heading"> GC <br>
  Woodturning </p>
  </div>
</div>
</body>
</html> 




body {
    background-image: url('images/wood%20grain.jpg');
    margin: 0px;
}
#main {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    padding-top: 0px;
}
#title {
    width: 1024px;
    height: auto;
    background-image: url('images/heading.jpg');
    margin: 0px auto auto 0px;
    padding: 0px;
}
#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom:10px;
  margin-top:0;
    font-weight: bold;
    color: #FFF;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="main">
  <div id="title">
    <p id="heading"> GC <br>
  Woodturning </p>
  </div>
</div>

score 0 · Answer 5 · edited May 23 '17 at 11:51

0

please try this.... more info please click here

#heading {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 72px;
    padding-left: 100px;
    padding-bottom: 10px;
    font-weight: bold;
    color: #FFF;
    margin: 0px;
    text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}

edited May 23 '17 at 11:51

Community

1
1

answered Feb 16 '16 at 07:08

Sanjay Bhardwaj

412
2
10

score 0 · Answer 6 · answered Feb 16 '16 at 07:09

This needs to be added to your #Heading CSS

margin: auto;

It should look like this

#heading {
margin: auto;
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;    
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;

}

JSFiddle

A div in my HTML code is floating 72 pixels from the top of the screen

6 Answers6