[HTML, CSS] Page width exceeding 100%

Skilled Illusionist
Joined
Jul 1, 2007
Messages
367
Reaction score
1
Hello again!
This time my problem is with my stylesheet (I presume, anyways). To put it short and sweet, the page creates a scrollbar, making the page exceed "100%" to the right if you know what I mean.
I've tried to fix it, but I'm stumped and grew pissed off at it.

If you have any fixes for this, I'd gladly listen. Thank you in advance.

[Edit]: Solution found. It was a problem with the div width, obviously. Thank you anyway.

The web-page is as follows
-

> index.php
Code:
<html>
	<head>
		<title>Xenzo: Modern Solutions</title>
		<link rel="stylesheet" type="text/css" href="styles/global.css">
		<link rel="shortcut icon" type="image/png" href="favicon.png">
	</head>
<body>
	<div id="xenzo-body">
	
	<div id="friends">
		<div id="xH">
			Meet our friends over at <a href="http://www.koolabar.com" target="_blank">Koolabar</a>.
		</div>
	</div>
	
	<div id="clear"></div>
	
	<div id="xenzo-head">
		<div id="xH">
			<table cellspacing="0">
				<tr>
					<td>
						<div id="logo">
							<a href="http://www.xenzo.net"><img src="images/logo.png"></a>
						</div>
					</td>
					<td align="right">
						<div id="nav">
							<table id="nav" cellspacing="0">
								<tr>
									<td valign="top"><a href="http://www.xenzo.net/"><img src="images/navigation/home.png" onmouseover="this.src='images/navigation/home-hover.png'" onmouseout="this.src='images/navigation/home.png'"></a></td>
									<td valign="top"><a href="http://www.xenzo.net/hosting/"><img src="images/navigation/hosting.png" onmouseover="this.src='images/navigation/hosting-hover.png'" onmouseout="this.src='images/navigation/hosting.png'"></a></td>
									<td valign="top"><a href="http://www.xenzo.net/support/"><img src="images/navigation/support.png" onmouseover="this.src='images/navigation/support-hover.png'" onmouseout="this.src='images/navigation/support.png'"></a></td>
									<td valign="top"><a href="http://www.xenzo.net/support/"><img src="images/navigation/storage.png" onmouseover="this.src='images/navigation/storage-hover.png'" onmouseout="this.src='images/navigation/storage.png'"></a></td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
			</table>
		</div>
		
		<div id="xenzo-major-banner">
			<div id="xH" style="text-align: center;">
				<img src="images/banners/excited.png">
			</div>
		</div>
		
		<div id="xH" style="text-align: center;">
			<img src="images/xenzo_products.png">
		</div>
	</div>
	
	<div id="clear"></div>
	
	<div id="xenzo-products">
		<div id="xH">
			<table align="center" style="padding-top: 25px;">
				<tr>
					<td>
						<div id="xenzo-product-layer1">
							<div id="xenzo-product-layer2">
								<div id="xenzo-product-layer3">
									lol hai
								</div>
							</div>
						</div>
					</td>
					<td>
						<div id="xenzo-product-layer1">
							<div id="xenzo-product-layer2">
								<div id="xenzo-product-layer3">
									lol hai
								</div>
							</div>
						</div>
					</td>
					<td>
						<div id="xenzo-product-layer1">
							<div id="xenzo-product-layer2">
								<div id="xenzo-product-layer3">
									lol hai
								</div>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	
	</div>
	</center>
</body>
</html>

> /style/global.css
Code:
/* --------------------------------------
|	Copyright 2009 The Xenzo Project	|
|	http://www.xenzo.net/            	|
---------------------------------------*/

body
{
	background-color: #ffffff;
	margin: 0px;
}

div
{
	margin-right: auto;
	margin-left: auto;
	width: 740px;
}

#xenzo-body
{
	width: 100%;
}

#xH
{
	width: 50%;
}

#friends
{
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	font-size: 11px;
	font-family: lucida grande, arial;
	color: #7f7f7f;
	text-align: right;
	background-color: #eeeeee;
}
	#friends a, a:link
	{
		color: #7f7f7f;
		font-weight: bold;
		text-decoration: none;
	}
	#friends a:hover
	{
		color: #cecece;
	}

#clear
{
	height: 1px;
	width: 100%;
	background: #dddddd;
}

#xenzo-head
{
	width: 100%;
	background-color: #ffffff;
	padding-top: 3px;
}
	#logo
	{
		height: 49px;
		width: 141px;
		display: block;
		margin-top: 13px;
		margin-left: 10px;
	}
	#nav
	{
		margin-right: 50px;
	}
		#nav td
		{
			height: 17px;
			padding-left: 10px;
			padding-right: 10px;
		}
	#xenzo-major-banner
	{
		width: 100%;
	}

#xenzo-products
{
	width: 100%;
	background: url('../images/products_gradient.png') repeat-x;
	height: 200px;
}
	#xenzo-product-layer1
	{
		width: 300px;
		border: 1px solid #dddddd;
		height: 210px;
		background: #ffffff url('../images/product_info_gradient.png') repeat-x;
	}
	#xenzo-product-layer2
	{
		width: 100%;
		border: 1px solid #ffffff;
		height: 210px;
	}
	#xenzo-product-layer3
	{
		padding: 5px;
	}

The web-site is attatched if you would like to run your own.
And, excuse the crappy coding, I know, it usually gets the job done :)
 

Attachments

When you have the width at 100% and the padding-left/right is in use, than it will excede the limit. Either change it to 90%, or take out the padding.

I've already fixed the problem if you didn't see. And I know that, and it wasn't the problem. But thank you anyway.
 
Back