CODEWITHSUNDEEP
htmlcssmargin
Shuma
Shuma

Reputation: 293

Unwanted margin/gap left hand side of entire webpage

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>

Upvotes: 6

Views: 11253

Answers (6)

Mohammed Baashar
Mohammed Baashar

Reputation: 557

You must add "top/bottom/right/left = [whatever]" explicitly for this to work. Position:fixed frees your element from any influences relative to other elements.

Upvotes: 1

Abhishek
Abhishek

Reputation: 315

Always add these two line so that the uneven margin and padding default set will be 0:

* {
    margin:0px;
    padding:0px;
}

Upvotes: 1

user2361114
user2361114

Reputation: 162

Try by giving below style

CSS

body
{
 margin:0px;
}

OR

CSS

.pageContainer,
{
 position:realative;
 right:8px
}

.navBar 
{
 position:realative;
 right:8px
}

Upvotes: 0

lgkallday
lgkallday

Reputation: 21

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/

Upvotes: 2

Pedro Estrada
Pedro Estrada

Reputation: 2404

Your body has a margin of 8px;

set the margin to 0px and you're golden

body {
  margin: 0px;
}

Upvotes: 1

Vin&#237;cius Moraes
Vin&#237;cius Moraes

Reputation: 3516

You body tag have margin: 8px; just add in your css

body {
    margin: 0;
}

Upvotes: 5

Related Questions