Header Pushing The Containing Div Down From Top?

December 29, 2022 Post a Comment

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. Th

Solution 1:

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

Solution 2:

Each browser sets its value default styles for a variety of HTML-elements. With CSS Reset, we can neutralize this difference to ensure cross-browser style.

use http://cssreset.com

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


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;
}

h1 {
    font-size: 20px;
}

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

Solution 3:

Here the solution http://jsfiddle.net/hovru6qh/

* {
    padding: 0;
    margin: 0;
}

You need to reset all padding and margin

Solution 4:

You forgot the opening

<body>

-tag, could be that.

Also, instead of using

margin: 0 auto;

to get it to stick to the top of the page, try using

top: *margin to top*(0 = sticks to top without margin)

Solution 5:

Margins inside of block elements will - by default - overflow bi-directionally vertically when the element with the margin is set to display in inline-block or inline (h1 elements display in inline by default).

To fix this without changing the margin of your H1 text, but fixing the header to not be effected by it (as it shouldn't), add overflow: auto to the CSS of your header.

A Fiddle is here for you:

Bi-directional margin overflow fiddle

Good luck!

Html5 Academy