100% Width Causing Horizontal Scrolling

**tylerrowsell** · 10-16-2012 05:45 PM

Hi there the 100% of my page is causing scrolling. Any ideas

Heres the css

Code:

* { margin:0; padding:0; }
body {
    font-family:Arial, Verdana, Tahoma;
    background-image:url(images/main_background.jpg);
    background-attachment:fixed;
    background-repeat:no-repeat;
    margin:0 0 0 0 ;
    margin-top:20px;
    width:100%;
    margin-left:0px;
    margin-right:0px;
    }
#header {
    width:100%;
    min-width:1000px;
    margin:auto;
}
#headertitle {
    font-family:'Segoe UI';
    font-variant:small-caps;
    font-size:40px;
    color:white;
    text-align:left;
    width:400px;
    float:left;
    position:relative;
    width:80%;
    padding-left:10%;
}
#navigation {
    width:100%;
    min-width:1000px;
    height:30px;
    background-color:rgb(38, 109, 171);
    position:relative;
float:left;
margin:auto;
padding-top:0px;
text-align:center;
margin-top:0;
padding-left:0;
}
        
#nav{
    list-style:none;
	width:100%;
    min-width:1000px;
    margin-top:0;
    margin-left:0px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;        
    text-align:center;
    font-family:'Segoe UI';
    font-variant:small-caps;
    font-size:20px; 
    height:30px;
    width:10%;
    min-width:120px;
}

#nav a{
	display:block;
	color:white;
	text-decoration:none;
        
}
#nav a:hover{
	
	background:#6b0c36;
	 
}

/*--- DROPDOWN ---*/
#nav ul{
	background-color:rgb(38, 109, 171); /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	margin-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
    width:10%;
    min-width:200px;
    background-color:rgb(38, 109, 171);
    background-repeat:no-repeat;
}
    
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:-40px; /* Bring back on-screen when needed */
    color:white;
    
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#6b0c36;
	 text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}
#title {
    width: 100%;
    min-width: 1000px;
    height:50px;
    margin: auto;
    float: left;
    padding-left:10%;
    position:relative;
}
#content {
    width:100%;
    min-width:1000px;
    margin:auto;
    float:left;
    position:relative;
}
#footer {
    width:100%;
    min-width:1000px;
    height:100px;
    margin:auto;
    float:left;
    position:relative;
    background-color:rgb(38, 109, 171);
    padding-left:20px;
}

and the html

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grenfell Campus Volleyball</title>

    <link href="master.css" rel="stylesheet" type="text/css" />



</head>
<body>
<div id="header" >
    <div id="headertitle">Grenfell Campus <br /><b>Volleyball</b></div>
    
</div>
    <div id="navigation">
        <ul id="nav">
            <li><a href="index.asp">Home</a></li>
            <li><a href="?p=About Us">About</a></li>
            <li><a>Schedules</a>
                <ul><li><a href="?p=Schedules">Ladies League</a></li></ul>
            </li>
            <li><a href="?p=Results">Results</a>
                <ul><li><a>Ladies League</a></li></ul>
            </li>
            <li><a href="?p=Archives">Archives</a></li>
            <li><a href="?p=Photos">Photos</a></li>
            <li><a href="?p=Links">Links</a></li>
            <li><a href="?p=Contact">Contact</a></li>
        </ul>
    </div>
    <div id="title"><h1><%Response.Write(Request.Querystring("p")) %></h1></div>
    <div id="content">
        <%
            page = Request.QueryString("p")
If page <> "" Then
FileName = Page & ".asp" 
Else FileName="main.asp"
End If
Server.Execute(FileName)%>
    </div>
    <div id="footer">
        
    </div>
    
<script type="text/javascript" >
    var winW = 630, winH = 460;
    if (document.body && document.body.offsetWidth) {
        winW = document.body.offsetWidth;
        winH = document.body.offsetHeight;
    }
    if (document.compatMode == 'CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth) {
        winW = document.documentElement.offsetWidth;
        winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
        winW = window.innerWidth;
        winH = window.innerHeight - 323;//height of all elements except content
    }

    document.getElementById("content").style.minHeight = winH + "px";
</script>
</body>
</html>

**theyoker** · 10-20-2012 02:02 PM

Its something within.

Code:

 <div id="title"><h1><%Response.Write(Request.Querystring("p")) %></h1></div>
    <div id="content">
        <%
            page = Request.QueryString("p")
If page <> "" Then
FileName = Page & ".asp" 
Else FileName="main.asp"
End If
Server.Execute(FileName)%>
    </div>
    <div id="footer">
        
    </div>

Take that out of your HTML and there is no scrolling. Trying to get in working.

Update:

You used padding-left:20px for one and padding-left:10%; ( working CSS below now well at least on my pc).
Tell me if it works on yours. You might also be scrolling due to you set the min-width of almost all elements to 1000px.

Code:

* { margin:0; padding:0; }
body {
    font-family:Arial, Verdana, Tahoma;
    background-image:url(images/main_background.jpg);
    background-attachment:fixed;
    background-repeat:no-repeat;
    margin:0 0 0 0 ;
    margin-top:20px;
    width:100%;
    margin-left:0px;
    margin-right:0px;
    }
#header {
    width:100%;
    min-width:1000px;
    margin:auto;
}
#headertitle {
    font-family:'Segoe UI';
    font-variant:small-caps;
    font-size:40px;
    color:white;
    text-align:left;
    width:400px;
    float:left;
    position:relative;
    width:80%;
    padding-left:10%;
}
#navigation {
    width:100%;
    min-width:1000px;
    height:30px;
    background-color:rgb(38, 109, 171);
    position:relative;
float:left;
margin:auto;
padding-top:0px;
text-align:center;
margin-top:0;
padding-left:0;
}
        
#nav{
    list-style:none;
	width:100%;
    min-width:1000px;
    margin-top:0;
    margin-left:0px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;        
    text-align:center;
    font-family:'Segoe UI';
    font-variant:small-caps;
    font-size:20px; 
    height:30px;
    width:10%;
    min-width:120px;
}

#nav a{
	display:block;
	color:white;
	text-decoration:none;
        
}
#nav a:hover{
	
	background:#6b0c36;
	 
}

/*--- DROPDOWN ---*/
#nav ul{
	background-color:rgb(38, 109, 171); /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	margin-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
    width:10%;
    min-width:200px;
    background-color:rgb(38, 109, 171);
    background-repeat:no-repeat;
}
    
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:-40px; /* Bring back on-screen when needed */
    color:white;
    
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#6b0c36;
	 text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}
#title {
    width: 100%;
    min-width: 1000px;
    height:50px;
    margin: auto;
    float: left;
    position:relative;
}
#content {
    width:100%;
    min-width:1000px;
    margin:auto;
    float:left;
    position:relative;
}
#footer {
    width:100%;
    min-width:1000px;
    height:100px;
    margin:auto;
    float:left;
    position:relative;
    background-color:rgb(38, 109, 171);
}

Thread: 100% Width Causing Horizontal Scrolling

Thread Tools

Display

100% Width Causing Horizontal Scrolling

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions