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.
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With