i am creating a Responsive webpage. its structure is as follows:
<body>
<div class=“page”>
<div class=“header”>
</div>
<div class=“content”>
</div>
<div class=“footer”>
</div>
</div><!–page ends–>
</body>
when i give div header a margin-top:10px then the div page also moves along with it. also i am not able to provide margin-top:1000px to div content. please help. html and css coding i am going to provide you below.
@charset "utf-8";
/* CSS Document */
/*---------------------------Reset Begins---------------------------------*/
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, hgroup,
menu, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
hgroup, menu, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*-------------------------------------Reset Ends------------------------------------------*/
h1{
font-size:1.5em;
}
h2{
font-size:1.4em;
}
h3{
font-size:1.3em;
}
body{
margin:0;
padding:0;
position:relative;
}
.page{
margin:0;
padding:0;
width:100%;
height:auto;
background-color:#993;
position:relative;
top:0px!important;
}
.header,.content,.footer{
margin:auto;
width:80%;
clear:both;
position:relative;
}
.logo{
background-color:#CC3300;
width:30%;
float:left;
clear:both;
}
.page .header .logo img{
width:80%;
max-width:80%;
margin:5% 10%;
}
.header{
margin-top:0px;
}
.content{
margin-top:1000px;
}
.nav{
background-color:#CC3300;
width:70%;
float:left;
clear:right;
height:70px;
}
.nav ul{
width:100%;
}
.nav ul li{
float:left;
display:inline-block;
width:22%;
overflow:hidden;
margin: 0 2% 0 0;
padding:0 0 0 0;
}
.nav ul li a{
display:block;
min-height:45px;
height:auto;
background-color:#69C;
padding:25px 0 0 20%;
text-decoration:none;
}
.nav ul li a:hover{
background-color:#000;;
}
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>ROBOT…OR NOT?</title>
<meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com" />
<meta name="robots" content="index, follow" />
<meta name="description" content="A demonstration site for Ethan Marcotte's book, RESPONSIVE WEB DESIGN" />
<meta name="keywords" content="responsive, responsive design, responsive web design, css, fluid grids, media queries, ethan, ethan marcotte, lol keywords lol" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="stylesheet.css" media="screen, projection" />
<!--
<script src="http://use.typekit.com/daz7uli.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="-/js/respond.js"></script>
-->
</head>
<body>
<div class="page">
<div class="header">
<div class="logo">
<!--<div class="outer_logobox"> -->
<img src="img/logo.png" />
<!--
</div>outer logo box ends-->
</div><!--logo ends-->
<div class="nav">
<ul>
<li id="nav-blog"><a href="#">The ’Bot Blog</a></li>
<li id="nav-rated"><a href="#">Top Rated</a></li>
<li id="nav-droids"><a href="#">Droids of the Day</a></li>
<li id="nav-contact"><a href="#">Contact Us</a></li>
</ul><!-- /end ul#nav-primary.nav -->
</div><!--nav ends-->
</div><!--header Ends-->
<div class="content">
<div class="about">
<div class="headingabout">
Recently in The Bot Blog
</div><!--headingabout ends-->
<div class="datebox">
<h1>10</h1> <h2>october</h2>
</div><!--date ends-->
<div class="contentabout">
“KILL ALL HUMANS?” BUT WHY?
Somewhere in my stomach I felt a cold, hard knot. Take stainless steel alloyed with titanium and plate it with three inches of lead. Take a brain made up of super-charged magnetic crystals enclosed in a leaden cranium and shielded by alloy steel. A bullet wouldn’t pierce it; radiations wouldn’t derange it; an axe wouldn’t break it.
</div><!--contentabout ends-->
<div class="postedby">
</div><!--postedby ends-->
<div class="recententries">
</div><!--recententries ends-->
</div><!--about ends-->
<div class="robot">
<div class="robotimg">
<img src="img/robot.jpg" />
</div><!--robotimg ends-->
<div class="robotheading">
YOU CAN NEVER BE TOO SURE.
</div><!--robotheading ends-->
<div class="robotcontent">
Never wonder again if your new potted plant is secretly a rampaging killbot, beeping away maliciously into the night. Stop worrying whether that “android” you bought is actually a toaster with pipe cleaners taped to its sides.
Welcome to ROBOT OR NOT. We answer these questions so you don’t have to.
</div><!--robotcontent ends-->
</div><!--robot ends-->
<div class="gallery">
<div class="galleryheading">
</div><!--galleryheading ends-->
<div class="gallerybots">
</div><!--gallerybots ends-->
<div class="gallerynots">
</div><!--gallerynots ends-->
</div><!--gallery ends-->
</div><!--content Ends-->
<div class="footer">
<div class="footerinfo">
</div><!--footerinfo ends-->
</div><!--footer ends-->
</div><!--Page ends-->
</body>
</html>
