why does relative positioning make a horizontal scroll bar? - html

Question

I am trying to position some text/pictures using position relative, however when using relative, it creates a scroll bar eventhough the content is not over there. Is there a way to not have it do this other than overflow:hidden?
the css for the object is
body {background-image:url('../images/logo1.jpg');
background-repeat:no-repeat;
background-size: cover;
}
body {color:black;}
a, a:visited {
color:white;
text-decoration:none;
}
div#header {
font-size:280%;
float:right;
text-decoration:underline;
}
#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
position:absolute;
top:100px;
left:0px;
font-size:175%;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
font-size:150%;
}
div.logo
img {
position:absolute;
left:0;
top:0;
}
div#support {
text-align:center;
font-size:250%;
color:#CC3300;
position:relative;
top:90px;
left:34%;
text-decoration:underline;
font-weight:bold;
}
div#photo
img{
margin-top:7%;
margin-left:30%;
}
p#follow {
position:relative;
left:50%;
top:-40px;
font-size:250%;
color:white;
text-decoration:underline;
font-weight:bold;
margin-top:5
}
div#facebook
img{
position:relative;
left:50%;
top:-40px;
}
div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:600px;
top:-200px;
}
ul#site {
font-size:175%;
margin-top:-10%;
margin-left: 33%;
padding-left: 0;
color:white;
}
#media (min-width : 1300px)
and (max-width : 1400px) {
div#support {
text-align:center;
font-size:150%;
color:#CC3300;
position:relative;
top:90px;
left:60%;
text-decoration:underline;
font-weight:bold;
width:40%;
}
div#photo {
margin-top:3%;
height:50%;
width:50%;
}
div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:400px;
top:-200px;
}
div#facebook
img{
position:relative;
left:50%;
top:-50px;
}
ul#site {
font-size:175%;
margin-top:-13%;
margin-left: 33%;
color:white;
}

Answer 1

If you are trying to position text, it likely has a 100% width (as block elements do). You may not be able to see it, but there is a good chance that by putting left: 800px; on your element, it is pushing its bounds out, past the edge of the screen.
This does not happen when using absolute positioning as it basically tells everything to ignore the space that the element takes up.
You could try making sure all of the elements you are positioning are set to either display: inline; or display: inline-block;, and/or setting a width on the element that you know will keep it contained to the width of the screen.