Menu
HTML:
<body>
<div id="page-body">
<div class="footer"></div>
</div>
</body>
CSS:
body {
height: 100%;
width: 100%;
}
.footer {
left: 0;
bottom: 0em;
float: left;
width: 100%;
height: 3em;
background-color: #9FC5C9;
}
#page-body {
min-width: 800px;
position: relative;
left: 0;
margin-top: 7%;
top: 7%;
width: 100%;
height: 10em;
background-color: #456;
}
http://jsfiddle.net/trbd1dhL/
Take a look at the above link. The <div> does not stick to the left of window. It has some indentation. Sometimes the parent sticks to the left but the child is indented. Even bottom property not working. How to fix this issue?
749
You have a lot going in your CSS that has no effect. Your footer class, for example, has left and bottom properties set but no position property. You'll need to specify position: absolute, assuming that you want your footer to attach to the bottom of the page.
Additionally, your body has height 100%, but you haven't specified a height for the html element. When using percentage heights, the parent of the element that you apply the percentage height to must have a specified height.
Try this instead:
html, body {
height:100%;
padding:0;
margin:0;
}
#page-body {
background-color:#456;
height: 100%;
}
.footer {
position: absolute;
left:0;
bottom:0;
width:100%;
height:3em;
background-color:#9FC5C9;
}<div id="page-body">
<div class="footer"></div>
</div>This is default browser padding/margin on html and body elements. Just set them to 0:
html, body {
margin: 0;
padding: 0;
}
http://jsfiddle.net/trbd1dhL/2/
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
