I'm rewriting my website, and have run into an odd phenomenon that I simply can't understand. I want to enclose the <header> and <nav> sections in a single container, so that the <footer> will run across and below both. Now this truly isn't rocket science.
However, I simply can't persuade my HTML to do this.
Here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
blabla
</head>
<body>
<div id="main">
<header>
<img class="hdrcent" src="../images/logogpsancv.gif" alt="Picture of our logo" title="Our logo" />
</header>
<nav>
<ul>
<li>Occupancy chart & tarifs</li>
<li>Inside "La Souvigne",</li>
<-- etc -->
</ul>
</nav>
Lorem ipsos
</div>
<footer>
Name, address, phone number etc.
</footer>
</body>
</html>
Here's the relevant CSS (the usual HTML5 reset begins the declaration)
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
/*
* {
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s cubic-bezier(0,.39,.25,1);
transition: all 0.6s cubic-bezier(0,.39,.25,1);
}*/
body {max-width:100%;
background-color:#E6F0FF;
font-size: 0.8em;
margin:10px;}
#main{border:dashed;
border-color:red;
}
header {
background-color: transparent;
border-style: outset;
border-width: 3px;
width: 80%;
clear: none;
margin-left:auto;
margin-right:auto;
}
img.flag{
clear:none;
float:right;
width:5%;
padding-top:5%;
}
IMG.hdrcent{ display: block;
margin-left: auto;
margin-right: auto;
border:none;
width: 90%;
}
nav {background-color: #99C2FF;
float:left;
width:20%;
font-size: 1em;
font-weight:bold;
font-style:italic;
padding-top:80px;
min-height:550px;}
/*snip more stuff*/
=======
I'd have expected that because division main entirely encloses both the header and the nav sections in the code, the red dashed border, which I only put there to make the limits visible, should also enclose both sections. It doesn't, it just encloses the header!
I'm sure it's me, but I'm blessed if I know why.
All the Best
Ian
Ian
