Header pushing the containing div down from top?

 

Questions


I’m new to stackoverflow and web development altogether. Trying to learn without any help. I’m trying to create a C.V of sorts as part of honing my skills. Here’s what happened.

The first div under my containing div is a div with id header. I’ve fixed my containing div to top with margin: 0 auto; It works fine with no text in my nested div (header) but as soon as I write something in (header) div it pushes the header div down and since header is the first div/element in the containing div, it pushes that down as well.

Here’s my HTML:

body {
  margin: 0;
  font: normal 12px/18px'Helvetica', Arial, sans-serif;
  background: #44accf;
}
/* Positioning Rules */

#container {
  width: 900px;
  margin: 0 auto;
}
#header {
  background: #b7d84b;
  height: 50px;
  text-align: center;
  color: #ddd;
  line-height: 50px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Did We?</title>
  <link href="didwe.css" type="text/css" rel="stylesheet" />
</head>

<div id="container">
  <div id="header">
    <h1> Mansoor Zia </h1>	

  </div>
</div>
<!--container-->
</body>

</html>

I’m unable to attach the image here since I’m well the newest member.

 

 

————————————————-

Answer

Add h1{margin:0} to your css and that fixes your problem. Just so you know, unless defined otherwise all text elements have margin which screws around with positioning and sizing 🙂

css,html,margins

[], [], []

Facebook Comments

Post a comment