CSS Divs made horizontal Scroll bar

Dashsa · Feb 13, 2008

Hello,
I am still having HUGE issues with a site I am building.
I made the site

But now want the site to be in the middle of the screen.
I have achieved this Here:

http://island-playground.com/Testindex.html

The Main issue is that since I added the code

Code:

#wrapper {
   background-color:#97d4ff;
   width:960px;
   height:1000px;
   margin:0px auto;
}

to center the site I had to change all the div attributes. This has caused scroll bars on the bottom of my page that I dont need.
How can I resolve this issue?
Thanks
D

gmmastros · Feb 13, 2008

I just checked. There are 143 validation errors with that page. Fixing those may help with the scroll bar. At a minimum, you should fix the page so that it validates.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom

gmmastros · Feb 13, 2008

try this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<meta name="description" content="Indoor Playground in Hilton Head Island , South Carolina," />
		<meta name="keywords" content="Indoor Playground, party, kids birthday parties, birthday party,Indoor play center,Indoor Jump center,Hilton Head Family entertainment, birthday parties, entertainment, party rental,Hilton Head Island, Bluffton" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="ip.css" type="text/css" rel="stylesheet" />
		<title>Island-Playground</title>
	</head>
	<body>
		<div id="wrapper">
			<!-- Start of StatCounter Code -->
			<script type="text/javascript">
				var sc_project=3407732; 
				var sc_invisible=1; 
				var sc_partition=37; 
				var sc_security="0a3b75b2"; 
			</script>

			<script type="text/javascript" src="[URL unfurl="true"]http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div[/URL] class="statcounter"><a class="statcounter" href="[URL unfurl="true"]http://www.statcounter.com/"><img[/URL] class="statcounter" src="[URL unfurl="true"]http://c38.statcounter.com/3407732/0/0a3b75b2/1/"[/URL] alt="web analytics" /></a></div></noscript>
			<!-- End of StatCounter Code -->
			<div style="float:left;"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/logo.jpg"[/URL] alt="ss" /></div>
			<div style="float:right;"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/indexLogo.jpg"[/URL] alt="" /></div>
			<div style="clear:left;"></div>
			
			
			<div style="float:left; width:130px; margin-left:20px;">
				<a href="index.html" onmouseover="document.index.src='[URL unfurl="true"]http://www.island-playground.com/Images/homebuttonO.jpg';"[/URL] onmouseout="document.index.src='[URL unfurl="true"]http://www.island-playground.com/Images/h.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/h.jpg"[/URL] style="border:none;" alt="" /></a><br />
				<a href="About.html" onmouseover="document.About.src='[URL unfurl="true"]http://www.island-playground.com/Images/AboutButtonO.jpg';"[/URL] onmouseout="document.About.src='[URL unfurl="true"]http://www.island-playground.com/Images/Aboutbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Aboutbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Open.html" onmouseover="document.Open.src='[URL unfurl="true"]http://www.island-playground.com/Images/OpenbuttonO.jpg';"[/URL] onmouseout="document.Open.src='[URL unfurl="true"]http://www.island-playground.com/Images/Openbutton.jpg';">[/URL] <img src="[URL unfurl="true"]http://www.island-playground.com/Images/Openbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Parties.html" onmouseover="document.party.src='[URL unfurl="true"]http://www.island-playground.com/Images/PartiesbuttonO.jpg';"[/URL] onmouseout="document.party.src='[URL unfurl="true"]http://www.island-playground.com/Images/Partiesbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Partiesbutton.jpg"[/URL] alt="" /></a><br/>
				<a href="Classes.html" onmouseover="document.cla.src='[URL unfurl="true"]http://www.island-playground.com/Images/ClassesbuttonO.jpg';"[/URL] onmouseout="document.cla.src='[URL unfurl="true"]http://www.island-playground.com/Images/Classesbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Classesbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Faqs.html" onmouseover="document.faq.src='[URL unfurl="true"]http://www.island-playground.com/Images/FAQO.jpg';"[/URL] onmouseout="document.faq.src='[URL unfurl="true"]http://www.island-playground.com/Images/FaqButton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/FaqButton.jpg"[/URL] alt="" /></a><br />
				<a href="#" onmouseover="document.pic.src='[URL unfurl="true"]http://www.island-playground.com/Images/photoButtonO.jpg';"[/URL] onmouseout="document.pic.src='[URL unfurl="true"]http://www.island-playground.com/Images/Photobutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Photobutton.jpg"[/URL] alt="" /></a><br />
				<a href="Employment.html" onmouseover="document.emp.src='[URL unfurl="true"]http://www.island-playground.com/Images/EmploymentO.jpg';"[/URL] onmouseout="document.emp.src='[URL unfurl="true"]http://www.island-playground.com/Images/Employmentbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Employmentbutton.jpg"[/URL] alt="" /></a><br />
				<a href="Directions.html" onmouseover="document.dir.src='[URL unfurl="true"]http://www.island-playground.com/Images/directionsO.jpg';"[/URL] onmouseout="document.dir.src='[URL unfurl="true"]http://www.island-playground.com/Images/Directionsbutton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/Directionsbutton.jpg"[/URL] alt="" /></a><br />
				<a href="ContactUs.html" onmouseover="document.con.src='[URL unfurl="true"]http://www.island-playground.com/Images/contactUsO.jpg';"[/URL] onmouseout="document.con.src='[URL unfurl="true"]http://www.island-playground.com/Images/contactUs.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/contactUs.jpg"[/URL] alt="" /></a><br />
				<a href="Forms.html" onmouseover="document.form.src='[URL unfurl="true"]http://www.island-playground.com/Images/waiverButtonOver.jpg';"[/URL] onmouseout="document.form.src='[URL unfurl="true"]http://www.island-playground.com/Images/waiverButton.jpg';"><img[/URL] src="[URL unfurl="true"]http://www.island-playground.com/Images/waiverButton.jpg"[/URL] alt="" /></a><br />
			</div>

			<div style="float:left;text-align:center; width:580px;">
				<img src="[URL unfurl="true"]http://www.island-playground.com/Images/mainCont.jpg"[/URL] alt="" />
				<div id="blueHeading">
					<br />
					Rain or shine, Island Playground offers 
					exercise for young bodies AND minds!
				</div>
			</div>
			
			<div id="ANewsBG" style="float:right;">
				<b>Island Playground<br />
				will be<br />
				OPENING SOON!</b><br />
				Check back for <br />
				Grand Opening details!<br />
				<br />

				Now taking <b>birthday <br />
				Party reservations</b> for<br />
				May-August. <b> $20 OFF</b> if <br />
				booked before April 1st<br />
				<br />
				<b>Now Available:</b><br />

				Frequent Player <br />
				cards<br />
				Buy now and get <br />
				<b>a free T-shirt</b><br />
			</div>
			<div style="clear:both;"></div>
		

			<div style="float:left;">
				<a href="[URL unfurl="true"]http://www.island-playground.com/ipForm/ip3.jpg"[/URL] target="_blank"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/ipstar.jpg"[/URL] alt="" /></a>
			</div>

			<div id="indexFooter" style="float:left; padding-top:15px; margin-left:50px;">		
				<div style="float:left; margin-left:20px;">
					<img src="[URL unfurl="true"]http://www.island-playground.com/Images/sock.gif"[/URL] alt="" />
				</div>
				<div style="float:left; margin-left:20px; padding-top:10px;">
					Don't Forget <br />Your Socks
				</div>		
										
				<div style="float:left; margin-left:100px;">
					<a href="[URL unfurl="true"]http://www.island-playground.com/ipForm/IPwaiver.pdf"[/URL] target="blank"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/PDF_icon.gif"[/URL] style="border:none;" alt="" /></a>
				</div>
				<div style="float:left; margin-left:20px; padding-top:10px;">
					<a href="[URL unfurl="true"]http://www.island-playground.com/ipForm/IPwaiver.pdf"[/URL] target="blank">
						Download <br />Waiver
					</a>
				</div>		
			</div>
										
			<div style="float:right; margin-top:-40px;">
				<a href="mailto:jen@island-playground.com?subject=Please add me to your news letter"><img src="[URL unfurl="true"]http://www.island-playground.com/Images/star.jpg"[/URL] alt="" /></a>
			</div>
			
			<div style="clear:both;"></div>
					
			<div style="text-align:center;">
				1538 Fording Island Road, Suite 104<br />
				Hilton Head, SC 29926<br />
				(843) 837-8383<br />
			</div>

		</div>
	</body>
</html>

Code:

img
{
	border:none;
}

#all{
height:200%;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}

#wrapper {
   /* this sets the blue background color */
   background-color:#97d4ff;
   /* this dictates the total width of the content */
   width:960px;
   height:1000px;
   /* this tells the page to put an equal amount of margin on both sides, essentially "centering" the content */
   margin:0px auto;
}

#Aall{
height:800px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Eall{
height:1050px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Oall{
height:1300PX;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Pall{
height:2130px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}
#Call{
height:2000px;
width:960px;
background-color:#97d4ff;
background-repeat:repeat-y;
}

#background{
position:absolute;
}

#Logo{
/*position:relative;
top:0px;
left:0px;
z-index:1;*/
}

#LogoRight{
position:absolute;
top:35px;
left:690px;
background-color:#97d4ff;
}
#LogoRight1{
position:absolute;
top:35px;
left:670px;
}
#TRGrapihc{
position:absolute;
top:15px;
left:420px;
}
#TRGrapihc1{
position:relative;
top:-200px;
left:375px;
}
#Jumping{
position:absolute;
top:15px;
left:540px;
}

#blueHeading{
font-family:Verdana;
color:#ff6600;
font-size:24px;
}


#ANewsBG
{
	background-repeat:no-repeat;
	color:#ffffff;
	font-size:14px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-image:url([URL unfurl="true"]http://www.island-playground.com/Images/NewsBG.jpg);[/URL]
	width:200px;
	height:295px;
	padding-top:10px;
	margin-right:20px;
}

#star{
position:relative;
top:-1200px;
left:750px;
border:none;
		}
		
#Packetstar
{
	border:none;
}
		
		
				
	#socks{
	position:absolute;
	top:650px;
	left:790px;
	
	}

#LeftNavMenu{
border:none;
position:relative;
left:20px;
top:-270px;
}

#mainContent{
width:500px;
position:relative;
top:-970px;
left:200px;
font-size:22px;
}
#indexFooter
{
	background-image:url([URL unfurl="true"]http://www.island-playground.com/Images/footerBG.jpg);[/URL]
	background-repeat:no-repeat;
	width:503px;
	height:94px;
}
#Isox{
position:absolute;
width:100%;
overflow:hidden;
height:100%;
left:15px;
top:18px;
}
#IsoxText{
font-size:17px;
position:absolute;
left:70px;
font-family:Verdana;
}
#Ipdf{
position:absolute;
left:300px;
top:18px;
}
#IpdfText{
font-size:17px;
position:absolute;
left:70px;
font-family:Verdana;
}

					#footer{
						text-align:center;
						top:-1200px;
						left:0px;
						position:relative;
						}
						#Afooter{
						text-align:center;
						top:750px;
						left:350px;
						position:absolute;
						}
						#Cfooter{
						text-align:center;
						top:1930px;
						left:350px;
						position:absolute;
						}
			#Openfooter{
						text-align:center;
						top:1250px;
						left:350px;
						position:absolute;
						}
						
						
				#Employfooter{
						text-align:center;
						top:1000px;
						left:310px;
						position:absolute;
						}		
						
						
						
						#Partyfooter{
						text-align:center;
						top:2070px;
						left:350px;
						position:absolute;
						}
						
#AboutMainContent{
width:550px;
height:320px;
overflow:auto;
position:absolute;
top:250px;
left:180px;
font-size:18px;
}

#AboutMainContent1
{
	position:absolute;
	width:570px;
	height:100%;
	overflow:hidden;
	top:250px;
	left:160px;
	font-family:Verdana;
	font-size:13px;
}	
						
#MainContentHead
{
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
}

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom

Dashsa · Feb 13, 2008

Thanks
Works Great!
Now I just have to figure out what you did!
Thanks Again

gmmastros · Feb 13, 2008

Yeah. That's the problem with posting a solution without an explanation. Sorry.

First of all, you should realize that there are parts of the css file that are no longer being used. More significantly, nothing is positioned relative or absolute. Everything is accomplished using floating divs.

Also, the page should validate now except for the target="_blank" part. There are javascript ways to accomplish this while allowing the page to validate. A search in this forum should help you do that part.

If there's anything you are not clear about, just let me know and I'll try to help.

-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom

Dashsa · Feb 13, 2008

George,
You are awesome!!
I think I understand the changes and will read up more about floating Div's and will use them in the rest of the site as well as in the future.

Thanks
D

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Divs made horizontal Scroll bar

Dashsa

Programmer

gmmastros

Programmer

gmmastros

Programmer

Dashsa

Programmer

gmmastros

Programmer

Dashsa

Programmer

Similar threads

Part and Inventory Search

Sponsor