where the margin gone? - html

Question

I have the following html/css code: http://jsfiddle.net/J3YZ8/4/
HTML:
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
html {
height: 100%;
}
body {
direction: rtl;
height: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
#headerDiv {
height: 20%;
margin-bottom: 1%;
}
#footerDiv {
height: 10%;
margin-top: 1%;
}
#headerDiv,
#footerDiv {
clear: both;
background-color: #FF5500;
}
#bodyDiv {
height: 68%;
margin: 0% 2%;
}
#loginContainer {
background: green;
margin-bottom: 1%;
}
#menuContainer {
background: blue;
margin-top: 1%;
}
#loginContainer,
#menuContainer {
display: inline-block;
width: 29%;
margin-left: 1%;
height: 49%;
}
#contentContainer {
width: 69%;
height: 100%;
background: yellow;
float: left;
margin-right: 1%;
}
If you use this code on your browser (without jsfiddle) you will see there is no margin between the blue div (menuContainer) and the footer. In jsfiddle the margin is not equal to the margin between the yellow div (contentContainer) and the footer although it should be the same. How can I fix it?
More details:
this is image from jsfiddle result:
this is image from full screen result:
Does anyone knows how to fix it??

Answer 1

I do see a margin below the blue panel.
A height of 100% the html element does not mean "not higher than the window". If you don't want to scroll the page you could set overflow:hidden on the html. But then you won't see the footer.

Answer 2

<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
</div>
<div id="footerDiv">FooterPanel</div>
One of the main problems is that you have a second closing div with no opening - this can through IE in quirks mode and also cause other issues when working with floats and clears in CSS.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
Above is corrected code that should fix it - at least a start.
Are you looking to build a fluid height and width layout?
Also you need to clear the floats before you start the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>
There is a working sample of the code maintaining your margin.