Page width 100% with horizontal scroll issue

HTML & CSS
1

Hi,

I am brand new to the forum and fairly new to CSS in general. I have recently moved away from archaic table designs which I used to use for my websites after reading how dated they were and seeing all the advantages of CSS.

Therefore, please excuse any faux pas I have made in the code and/or my contributions to this site. I have been struggling with this issue all day and cannot for the life of me solve the problem. Here is my problem:

[I]My website resizes fine with everything staying in proportion and the content staying absolute in the the places I wish it to be. However, as you resize the page to say 800 x 600 resolution, the content is larger than the window and thus requires the user to scroll horizontally to see the rest of the page.

When this scrolling is done, the main header at the top of the page does not move with the scrolling.

Is there anyone who can help me with this?

the page is www.bantermedia.com

Below is my css stylesheet for the site:[/I]

body, ul, li, h1, h2, span{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}
body{
	background: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#2183c4));
	background: -moz-linear-gradient(top,  #292929,  #2183c4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#2183c4');
	background-attachment:fixed;
	background-repeat:inherit;
}

.slidingMenu {
	position: absolute;
	height:410px;
	width: 460px;
	top:39px;
	overflow:hidden;
	right:3px;
	font-family: Arial, Helvetica, sans-serif;
	float:right;
}
.slidingMenu li {
	display:block;
	float:right;
	clear:both;
	position:relative;
	overflow:hidden;
}
.slidingMenu li.move {
	width: 9px;
	height: 30px;
	right:0px;
	padding-right:10px;
	margin-top:2px;
	z-index: 8;
	position: absolute;    
	background: #2183c4;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#0771b8), 
			to(#2183c4)
		);     
	background: 
		-moz-linear-gradient(
			top, 
			#0771b8, 
			#2183c4
		);     
	-moz-border-radius: 8px 0px 0px 8px;  
	-webkit-border-top-left-radius: 8px;     	
	-webkit-border-bottom-left-radius: 8px; 
	border-top-left-radius: 8px;  
	border-bottom-left-radius: 8px;        
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;	
	}
.slidingMenu li a {
	font-size:20px;
	text-transform:uppercase;
	text-decoration: none;
	color: #ddd;
	outline: none;
	text-indent:5px;
	z-index: 10;
	display: block;
	float: right;
	height: 30px;
	line-height: 30px;
	position: relative;
	overflow: hidden;
	padding-right:10px;
}
/* Descriptions */
.slidingMenuDesc{
	margin-top:40px;
	position:relative;
}
.slidingMenuDesc div{
	background: #2183c4;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#0771b8), 
			to(#2183c4)
		);     
	background: 
		-moz-linear-gradient(
			top, 
			#0771b8, 
			#2183c4
		);   	
	height: 30px;
	padding-right:5px;
	left:-5px;
	width:0px;
	margin-top:2px;
	overflow:hidden;
	position:absolute;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 0px 8px 8px 0px;  
	-webkit-border-top-right-radius: 8px;     	
	-webkit-border-bottom-right-radius: 8px; 
	border-top-right-radius: 8px;  
	border-bottom-right-radius: 8px; 
}
.slidingMenuDesc div span {
	font-size:20px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 30px;
	line-height: 30px;
	position:absolute;
	right:10px;
	margin-left:5px;
	top:-3px;
}

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .livechat a		{
    background-image:url(../images/chat_icon.png);
}
ul#navigation .twitter a      {
    background-image: url(../images/twitter_icon.png);
}
ul#navigation .facebook a      {
    background-image: url(../images/facebook_icon.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .linkedin a   {
    background-image: url(../images/linkedin_icon.png);
}
ul#navigation .youtube a     {
    background-image: url(../images/youtube_icon.png);
}
ul#navigation .blog a    {
    background-image: url(../images/edit_icon.png);
}
#slogan {
	position: absolute;
	left: 15px;
	top: 87px;
	z-index: 11;
}
.livehelp {
	position: absolute;
	left: 1202px;
	top: 298px;
}
#title_headericon {
	position: absolute;
	left: 93px;
	top: 221px;
	z-index: 3;
}

#index_youtubeplayer {
	position: absolute;
	left: 730px;
	top: 340px;
	z-index:1;
	width: 677px;
	float:inherit;
}

        #LOGO {
	position: absolute;
	left: 0px;
	top: -5px;
	z-index: 11;
		}
		
		  #contactform {
	position: absolute;
	left: 100px;
	width: 600px;
	height: 400px;
	top: 320px;
}
			
		#CONTENT_wrapper {
	position: absolute;
	top: 228px;
	color: #ddd;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	height: 100%;
	left: 0px;
	text-indent: 120px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-variant: normal;
	text-transform: uppercase;
		}
#textarea {
	font-family: "comfortaa", Verdana, Tahoma;
	color: #FFF;
	height: auto;
	width: 646px;
	position: relative;
	text-align:justify;
	top: 730px;
	font-size: 18px;
	overflow: auto;
	left: 730px;
}
@font-face {
    font-family: "comfortaa";
    src: url(http://www.bantermedia.com/fonts/Comfortaa.ttf) format("truetype");
}
/*thanks to http://aajohan.deviantart.com/art/Comfortaa-font-105395949 */
#blogframe {
	position: absolute;
	left: 102px;
	top: 280px;
	width: 580px;
	height: auto;
	overflow: hidden;
	font-family: Comfortaa;
	color: #FFF;
}
	
	
#abouttext {
	position: absolute;
	left: 25%;
	top: 320px;
	color: #CCC;
	font-family: "comfortaa", Verdana, Tahoma;
	font-size:18px;
	width: 600px;
	text-align: justify;
}
#mapid {
	position: absolute;
	left: 800px;
	top: 345px;
}
#topbannerimg {
	position: absolute;
	height: 265px;
	left: 0px;
	right:0px;
	top: 5px;
	z-index: 1;
	background-image: url(../images/topimage2.png);
	min-width:1438px;

}
#_cincopa_widget_078bf1b3-0cbf-4189-b9cb-87d67344bd8a {
	position: absolute;
	left: 100px;
	top: 320px;
	color: #CCC;
	font-family: "comfortaa", Verdana, Tahoma;
	font-size:18px;
	width: 600px;
	text-align: justify;
}
#agstudiostext {
	position: absolute;
	left: 800px;
	top: 320px;
	color: #CCC;
	font-family: "comfortaa", Verdana, Tahoma;
	font-size:18px;
	width: 500px;
	text-align: justify;
}
	
#work1roll {
	position: absolute;
	left:150px;
	top:370px;
	width:250px;
	height:250px;
}

#work2roll {
	position: absolute;
	left:450px;
	top:370px;
	width:250px;
	height:250px;
}
#work3roll {
	position: absolute;
	left:750px;
	top:370px;
	width:250px;
	height:250px;
}
#work4roll {
	position: absolute;
	left:1050px;
	top:370px;
	width:250px;
	height:250px;
}
#work5roll {
	position: absolute;
	left:150px;
	top:670px;
	width:250px;
	height:250px;
}
#work6roll {
	position: absolute;
	left:450px;
	top:670px;
	width:250px;
	height:250px;
}
#work7roll {
	position: absolute;
	left:750px;
	top:670px;
	width:250px;
	height:250px;
}
#work8roll {
	position: absolute;
	left:1050px;
	top:670px;
	width:250px;
	height:250px;
}
#work9roll {
	position: absolute;
	left:150px;
	top:970px;
	width:250px;
	height:250px;
}
#work10roll {
	position: absolute;
	left:450px;
	top:970px;
	width:250px;
	height:250px;
}
#work11roll {
	position: absolute;
	left:750px;
	top:970px;
	width:250px;
	height:250px;
}
#work12roll {
	position: absolute;
	left:1050px;
	top:970px;
	width:250px;
	height:250px;
}
#work13roll {
	position: absolute;
	left:150px;
	top:1270px;
	width:250px;
	height:250px;
}
#work14roll {
	position: absolute;
	left:450px;
	top:1270px;
	width:250px;
	height:250px;
}
#work15roll {
	position: absolute;
	left:750px;
	top:1270px;
	width:250px;
	height:250px;
}
#work16roll {
	position: absolute;
	left:1050px;
	top:1270px;
	width:250px;
	height:250px;
}
#textarea2 {
	font-family: "comfortaa", Verdana, Tahoma;
	color: #FFF;
	height: auto;
	width: 646px;
	position: absolute;
	text-align:justify;
	top: 306px;
	font-size: 18px;
	overflow: auto;
	left: 183px;
}

		#BMicon {
	position: absolute;
	top: 98px;
	left: 55px;
}
        #headerimg {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 190px;
	z-index: -9;
}
        #LOGO {
	position: absolute;
	left: 0px;
	top: -5px;
	z-index: 11;
}
        a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:#fff url(codrops_back.png) no-repeat top left;
        }
      
        a:link {
	color: #CCC;
}
a:visited {
	color: #999;
}
a:hover {
	color: #CCC;
}
a:active {
	color: #CCC;
}
2

Thank you for your note on the code tags, I will do so in future.

If you resize the the window so it is say 600px wide a horizontal scrollbar will appear. If you then use said scrollbar you will see me issue.

Thanks

3

Hi, GreenyG welcome to Sitepoint :).

Ignoring the CSS being completely bloated with absolute positioining (you should NEVER use that to lay out a page, use floats/margins isntead)
The only reason something will scroll with tthe page (ignoring a bug in IE) is due to position:fixed being applied.
I see two instances of position:fixed being applied, but not to a header. Upon me loading your site up and me scrolling down it, I see nothing scrolling with it besides the side navigation, I must be missing something :).

In the future, please wrap your code around [noparse]

[/noparse] tags :slight_smile:

4

You’ve got that backwards a little I think. The min-width is 1440px which means larger monitors will have no trouble as that is the minimum. On bigger monitors there won’t be a problem as the image will repeat. (1440px is rather large for a minimum page size though - you would have been better making that text column fluid so the page can squeeze. Or float the columns so that it drop into one column at some stage.).

The attached image shows the problem with the menu not moving when scrolling

I can see your attachment and it looks fine to me. Where do you see a problem? It seems to be doing exactly what I would expect but then I may be missing the obvious as I usually do ;).

Thanks again for your time guys I really appreciate it.
Is there any official tag etc I can put on our blog as a thank you/recommendation?
No your thanks here is enough :slight_smile:

5

Thanks again for the response.

I’ve attached a screenshot. To show the issue. As you say, the min-width property means the header fills the window but this is only set to

 min-width:1440px;

This seems to work fine for my screen but if someone has a screen wider than 1440px then the banner will stop at 1440px (I can’t show this as my monitor won’t allow me to)

The attached image shows the problem with the menu not moving when scrolling

Thanks again for your time guys I really appreciate it.

Is there any official tag etc I can put on our blog as a thank you/recommendation?

6

Hi,

I don’t see a problem either :slight_smile:

If I close the window to about 600px width and then scroll to view content outside the viewport everything scrolls to the left as expected. What do you expect to happen?

You have a min-width on your top banner which will ensure it matches your widest content so it won’t get left behind which is what people usually complain about.

You may have to provide a screenshot of what is troubling you :slight_smile: