Navigation overlaps elements when wrapping - html

Question

I have a bunch of inline-blocks which I want to wrap when the browser window is shrunken. They look like this:
[nav element 1] [nav element 2] [nav element 3] [nav element 4]
This is a {h1} header.
When the browser is resized, I want them to wrap, which they do. But they overwrite the header on the next line:
[nav element 1] [nav element 2] [nav element 3]
[nav element 4]eader.
I've tried separating the header with paragraphs and linebreaks. Nope.
I've tried putting a "clear:both" on the {h1} style. Nope.
I've tried putting a {div} around the {h1} with a "display:block" and/or a "clear:both". Nope.
I want the page content to move down when the nav bar wraps.
Any hints?
My code and its results can be seen at criv.com/test
EDIT
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
position: absolute;
top: -1px;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}
<div class="nav">
2014 peony list
bloom calendar
photo gallery
peony<br />how-to's
peony<br />tales
<br />visit
<span class="clearfix">contact/ order</span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email peonies#criv.com, or phone [phone].</p>
<p>Review <b>the 2014 bloom season</b> in pictures!</p>
</span>

Answer 1

Remove position absolute from it. If you want nav to push 1px to top then you can use margin-top:-1px
Here is working code.
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}
<div class="nav">
2014 peony list
bloom calendar
photo gallery
peony<br />how-to's
peony<br />tales
<br />visit
<span class="clearfix">contact/ order</span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email peonies#criv.com, or phone [phone].</p>
<p>Review <b>the 2014 bloom season</b> in pictures!</p>
</span>