Menu
Just started making a site and I have margin of a few pixels down the entire left hand side and I cannot figure out why.
http://jsbin.com/elufob/1/
Any advice would be greatly appreciated
CSS
html{
min-width: 100%;
background-color: #add8e6;
}
.navBar{
text-align: center;
background-image: linear-gradient(to bottom, #666666 0%, #000000 60%);
color: white;
border-bottom:solid 1px #666;
top:0;
height:30px;
position:fixed;
width:100%;
z-index:1000;
}
.leftDiv{
clear: left;
text-align: left;
background-color: blue;
float: left;
max-width: 26%;
display: inline-block;
margin-right:2%;
margin-left: 0%;
margin-top: 2%;
border: black;
border-width: 5px;
border-style: double;
border-radius: 5px;
}
.middleDiv{
text-align: center;
background-color: green;
max-width: 70%;
float: right;
display: inline-block;
margin-top: 2%;
MARGIN-BOTTOM: 1%;
border-style: solid;
border: black;
border-width: 5px;
border-style: double;
border-radius: 5px;
}
.pageContainer{
width: 100%;
min-height: 100%;
min-width: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer{
background-image: linear-gradient(to bottom, #666666 0%, #000000 60%);
color: white;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
And the HTML
<html>
<link rel="stylesheet" href="psWebCss">
<header class=navBar>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
</header>
<body>
<div class="pageContainer">
<div class="leftDiv">
</div>
<div class="middleDiv">
</div>
</div>
<div class="footer">
Footer Text
</div>
</body>
</html>
961
Adjusting the Margin Size of an HTML Element With CSS This margin is automatically created by some browsers to allow for space between the edges of the viewport and the website content. You can remove this margin by setting the top and left margin to zero.
This means that the browser applies default CSS to every element, which is then overwritten by site styles. Sometimes, untreated default styles - known as the user agent stylesheet - work in your favour: the vertical space between paragraphs, the space under headings, are all default values.
On the Page Layout tab, in the Page Setup group, click Margins. Click the margin type that you want. For the most common margin width, click Normal. Note: When you click the margin type that you want, your entire document automatically changes to the margin type that you have selected.
You body tag have margin: 8px; just add in your css
body {
margin: 0;
}
This will fix it..
body{
margin:0;
padding:0;
}
Place this in a css file.
I think it would be best to use a reset stylesheet (if your not already) to overwrite any default browser styles which will cause issues such as yours.
This is a good one - http://meyerweb.com/eric/tools/css/reset/
34
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
