ok this is the problem : I have a wrap div that acts as a container to a header and a 2 columns.
The purpose is to have the header against the top of the viewport and to make the wrap div at least the height of the viewport for short content en at least the height of the content for long content.
In IE this works like a charm.
In Firefox for dome reason it doesn't. There is a gap between the wrap and the top of the viewport, and with short content it doesn't fill the viewport.
I experimented a bit and found that the gap at the top is due to the margin of the h1 within the header. Instead of shifting the h1 down, it stretches the margin past the top of the header and wrap and shifts the whole wrap down. The strange thing is that is I add a border round the header div, it does work (i.e. the margin stays in the wrap)
So first question : can someone explain this? and how can I solve it?
Second question : how can I get the wrap to stretch to the height of the viewport if there isn't enough content?
Here is the markup
<body id="index">
<div id="wrap">
<div id="header">
<h1>Niets is wat het lijkt... Ons motto sterkt ons continu in onze activiteiten!</h1>
</div>
<div class="hr"><hr /></div>
<div id="leftcol">
<ul>
<li><a href="index.htm">Onze Missie</a></li>
<li><a href="aanpak.htm">Onze aanpak</a></li>
<li><a href="#">Wie zijn we?</a></li>
<li><a href="code.htm">Deontologische code</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
<div id="container">
<h2>Inleiding</h2>
</div>
<div style="clear:both;"></div>
</div>
</body>
And here is the styling
/* CSS Document */
* {
padding:0;
margin:0;
}
html {
margin: 0;
padding: 0;
height:100%;
}
body {
font-size: 76%;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000000;
background-image: url("pics/background.gif");
height:100%;
}
p {
font-size:1em;
text-align:justify;
margin-bottom:0.7em;
margin-top:0.5em;
}
h1, h2, h3 {
color:#4B7CBF;
clear:both;
font-family:"Monotype Corsiva", "Times New Roman", Georgia;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.6em;
}
h3 {
font-size:1em;
font-family:Georgia, "Times New Roman", Times, serif;
}
ul {
margin-bottom:1em;
margin-top:0.5em;
list-style-position:inside;
list-style-type:square;
}
ol {
margin-bottom:1em;
list-style-position:inside;
}
ol li {color:#4B7CBF;}
ol li p, ol li ul li,ol li ul {color:#000;}
dl {margin-top:1em;}
dl h3 {margin-bottom:0.5em;}
dt {float:left;width:110px;}
dd {float:left;display:block;width:420px;}
address {
float:left;
width:150px;
text-align:center;
margin-left:20px;
margin-top:60px;
display:inline;
font-family:Georgia, "Times New Roman", Times, serif
}
/* hr replacement */
div.hr {
margin-left:50px;
height: 20px;
width:700px;
background: #fff url(pics/hr.jpg) no-repeat scroll center;
}
div.hr hr {
display: none;
}
/* instances */
#wrap {
padding: inherit;
text-align:left;
margin: 0 auto 0 auto;
width:800px;
background-image: url("pics/bg_container.gif");
height:auto;
}
* html #wrap {
height:100%;
}
#header {
padding: 0;
margin: 0;
width:800px;
height:128px;
background-image: url("pics/banner.jpg");
background-repeat:no-repeat;
}
#header h1 {
margin-left:250px;
margin-right:50px;
margin-top:30px;
}
#leftcol {
width:175px;
float:left;
margin-top:10px;
margin-left:20px;
display:inline;
}
#leftcol ul {
list-style: none;
list-style-position
utside;
margin:10px 0 10px 10px;
}
#leftcol a {
display:block;
font-family:"Monotype Corsiva", "Times New Roman", Georgia;
font-size:19px;
font-weight:bolder;
color:#4B7CBF;
text-decoration:none;
height:25px;
}
#leftcol a:hover {
color:#8DB9F0;
border-right:2px solid #4B7CBF;
}
#container {
float:right;
width:555px;
margin-top:11px;
margin-bottom:20px;
margin-right: 40px;
display:inline;
}
/* Classes */
The purpose is to have the header against the top of the viewport and to make the wrap div at least the height of the viewport for short content en at least the height of the content for long content.
In IE this works like a charm.
In Firefox for dome reason it doesn't. There is a gap between the wrap and the top of the viewport, and with short content it doesn't fill the viewport.
I experimented a bit and found that the gap at the top is due to the margin of the h1 within the header. Instead of shifting the h1 down, it stretches the margin past the top of the header and wrap and shifts the whole wrap down. The strange thing is that is I add a border round the header div, it does work (i.e. the margin stays in the wrap)
So first question : can someone explain this? and how can I solve it?
Second question : how can I get the wrap to stretch to the height of the viewport if there isn't enough content?
Here is the markup
<body id="index">
<div id="wrap">
<div id="header">
<h1>Niets is wat het lijkt... Ons motto sterkt ons continu in onze activiteiten!</h1>
</div>
<div class="hr"><hr /></div>
<div id="leftcol">
<ul>
<li><a href="index.htm">Onze Missie</a></li>
<li><a href="aanpak.htm">Onze aanpak</a></li>
<li><a href="#">Wie zijn we?</a></li>
<li><a href="code.htm">Deontologische code</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
<div id="container">
<h2>Inleiding</h2>
</div>
<div style="clear:both;"></div>
</div>
</body>
And here is the styling
/* CSS Document */
* {
padding:0;
margin:0;
}
html {
margin: 0;
padding: 0;
height:100%;
}
body {
font-size: 76%;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000000;
background-image: url("pics/background.gif");
height:100%;
}
p {
font-size:1em;
text-align:justify;
margin-bottom:0.7em;
margin-top:0.5em;
}
h1, h2, h3 {
color:#4B7CBF;
clear:both;
font-family:"Monotype Corsiva", "Times New Roman", Georgia;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.6em;
}
h3 {
font-size:1em;
font-family:Georgia, "Times New Roman", Times, serif;
}
ul {
margin-bottom:1em;
margin-top:0.5em;
list-style-position:inside;
list-style-type:square;
}
ol {
margin-bottom:1em;
list-style-position:inside;
}
ol li {color:#4B7CBF;}
ol li p, ol li ul li,ol li ul {color:#000;}
dl {margin-top:1em;}
dl h3 {margin-bottom:0.5em;}
dt {float:left;width:110px;}
dd {float:left;display:block;width:420px;}
address {
float:left;
width:150px;
text-align:center;
margin-left:20px;
margin-top:60px;
display:inline;
font-family:Georgia, "Times New Roman", Times, serif
}
/* hr replacement */
div.hr {
margin-left:50px;
height: 20px;
width:700px;
background: #fff url(pics/hr.jpg) no-repeat scroll center;
}
div.hr hr {
display: none;
}
/* instances */
#wrap {
padding: inherit;
text-align:left;
margin: 0 auto 0 auto;
width:800px;
background-image: url("pics/bg_container.gif");
height:auto;
}
* html #wrap {
height:100%;
}
#header {
padding: 0;
margin: 0;
width:800px;
height:128px;
background-image: url("pics/banner.jpg");
background-repeat:no-repeat;
}
#header h1 {
margin-left:250px;
margin-right:50px;
margin-top:30px;
}
#leftcol {
width:175px;
float:left;
margin-top:10px;
margin-left:20px;
display:inline;
}
#leftcol ul {
list-style: none;
list-style-position
utside;margin:10px 0 10px 10px;
}
#leftcol a {
display:block;
font-family:"Monotype Corsiva", "Times New Roman", Georgia;
font-size:19px;
font-weight:bolder;
color:#4B7CBF;
text-decoration:none;
height:25px;
}
#leftcol a:hover {
color:#8DB9F0;
border-right:2px solid #4B7CBF;
}
#container {
float:right;
width:555px;
margin-top:11px;
margin-bottom:20px;
margin-right: 40px;
display:inline;
}
/* Classes */
