Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Header pushing the containing div down from top?

Tags:

html

css

margins

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.

like image 656
Mansoor Zia Avatar asked Mar 26 '26 22:03

Mansoor Zia


1 Answers

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 :)

like image 91
jaunt Avatar answered Apr 01 '26 13:04

jaunt



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!