Page to wide in css - html

Question

making a web page and the main page is to wide and shows the scroll bars. have tried everything I can think of.
this is the url for the site www.sfbblag.com
here is the css`
/* start of Blaynes Code! */
html {
background: url(images/bg.png) no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body{
margin: 0px;
padding: 0px;
}
#Content {
width:100%;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
#menu {
width: 100%;
height: 35px;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color:#FFFFFF ;
background-color: #000000;
}
#menuside {
width: 100%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
border-radius: 8px;
float:right;
}
#menuside ul {
padding: 8px 0px;
margin: 0px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menuside li {
width:100%;
height:30px;
display: block;
text-align:left;
}
#menuside a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menuside a:hover {
color:#FFFFFF ;
}
#header {
width:100%;
height:180px;
position:absolute;
text-align:center;
background-color: rgba(3, 3, 3, 0.9); /* Color white with alpha 0.9*/
position:fixed;
top: 0px;
float:left;
}
#header1 {
width:20%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header2 {
width:46%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3 {
width:33%;
float: left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3a {
width:100%;
height:25%;
float:left;
color:#0000FF;
box-shadow: 10px 10px 5px #888888;
}
#header3b {
width:100%;
height:75%;
float:left;
box-shadow: 10px 10px 5px #888888;
}
#header4 {background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
width:100%;
float: left;
box-shadow: 10px 10px 5px #888888;
}
#clock { color:#ffffff;
font:Arial, Helvetica, sans-serif;
}
#navbar {
width:100%;
float:left;
height:10%;
color:#FFFFFF;
text-align:center;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
box-shadow: 10px 10px 5px #888888;
}
#contentholder {
box-shadow: 10px 10px 5px #888888;
width:50%;
height:60%;
position:fixed;
}
#contentleft {
display:inline;
width:20%;
float:left;
border:#0a61a6;
box-shadow: 10px 10px 5px #888888;
}
#contentleft1 {
height:40%;
}
#contentleft2 {
width:20%;
height:20%;
}
#contentleft3 {
height:20%;
width:100%;
}
#contentleft4 {
height:20%;
width:100%;
}
#containercenter {
box-shadow: 10px 10px 5px #888888;
height:100%;
display:inline;
width:50%;
float:left;
}
#containercenter1 {
color:#FFFFFF;
height:33%;
width:100%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
padding-left:5px;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
}
#containercenter2 {
height:33%;
width:100%;
background-color:#0a61a6;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
top: 400px;
}
#containercenter3 {
height:33%;
width:100%;
background-color:#0a61a6;
}
#contentright {
box-shadow: 10px 10px 5px #888888;
float:left;
height:100%;
width:30%;
display:inline;
}
#contentright1 {
float:left;
height:25%;
width:100%;
text-align:center;
}
#contentright2 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright3 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright4 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
margin-bottom: 20px;
}
#inputbox {
height: 33%;
}
#slider {
box-shadow: 10px 10px 5px #888888;
width:100%;
float:left;
}
#slider1 {
float:left;
width:33%;
display:inline;
}
#slider2 {
float:left;
width:33%;
display:inline;
}
#slider3 {
float:left;
width:33%;
display:inline;
}
#footer{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
#footermenu{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left; /* Clear floats */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#dfaa09;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* 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{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#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:0; /* Bring back on-screen when needed */
}
#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;
}
#navContainer {
box-shadow: 10px 10px 5px #888888;
margin:0;
padding:0;
text-align:left;
width:50%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: left;
text-shadow: 3px 2px 3px #333333;
}
#navContainer ul{
margin:0;
padding:0;
list-style:none;
}
#navContainer ul li {
position:relative;
}
#navContainer ul li span{
display:block;
background:url(images/blueVertNav/buttonLeft.png) top left no-repeat;
}
#navContainer ul li a{
text-decoration:none;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
display:block;
padding:8px;
background:url(images/blueVertNav/buttonRight.png) top right no-repeat;
}
#navContainer ul li span:hover {
background:url(images/blueVertNav/hoverLeft.png) top left no-repeat;
}
#navContainer ul li a:hover{
background:url(images/blueVertNav/hoverRight.png) top right no-repeat;
}
#navContainer ul ul{
position:absolute;
display:none;
}
#navContainer ul ul li a{
background:#bec8cb;
}
#navContainer ul li:hover ul{
width:80%;
position:relitive;
display:block; left:100%;
top:0;
}
/* end of Blaynes Code! */
form {
background: #fafafa;
padding: 20px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
/*New additions to css main sheet*/
#board{
width:60%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
outline-color: #000066;
color: #000000;
border: 4;
border-color: #000000;
box-shadow: 10px 10px 5px #888888;
}
#example4 {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
font-size: 9px;
font-weight: normal;
}
`
and here is the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Content-Script-Type" content="text/javascript">
<title>SFBBL AG TRUST</title>
<link rel="stylesheet" type="text/css" href="maintestafix.css"/>
<style type="text/css">
<!--
.style3 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!-- start of Header -->
<div id="header">
<div id="header1">
<div align="left">
<p><img src="Switzerland Flag.png" width="15%" /> </p>
<p class="style3"> </p>
</div>
</div>
<div id="header2">
<div align="center">
<img src="images/01-SFBBL.png" width="100%" />
</div>
</div>
<div id="header3">
<div id="header3a">
<div id="clock" align="right" >
<script type="text/javascript">
document.write ('<p>Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')
if (document.getElementById) onload = function () {
setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
}
</script>
</div>
</div>
<div id="header3b">
<div align="center">
<img src="Trust_LH.jpg" width="30%" border="0" />
</div>
</div>
</div>
<div id="header4" >
<!-- Start of Top Menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Bank Accounts</li>
<li>Credit Cards</li>
<li>Our Board</li>
<li>News</li>
<li>Products</li>
<li>Investments</li>
<li>Banking Options</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- End of Top Menu -->
</div>
</div>
<!-- End of Header -->
<div class="clear"></div>
<!-- Start of Main Content -->
<div id="content" >
<div id="contentleft">
<div id="contentleft1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<div id="menuside">
<ul>
<li>Log in</li>
<li>Resources</li>
<li>Branches</li>
<li>Calculator</li>
<li>Talk to us</li>
</ul>
</div>
</div>
<div id="contentleft2">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" height="120" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=DIA,NYSE,COMPQX,SPY&style=WLBlueStyle&w=160">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
<div id="contentleft3">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=EUR/USD,USD/JPY,GBP/USD,USD/CAD,AUD/USD&style=WLBlueStyle&w=200">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
</div>
<div class="clear"></div>
<div id="containercenter" >
<div id="containercenter1">
<div>
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
</div>
<div align="center">
<p align="left">The purpose of SFBBL Trust AG is to provide creative, working solutions to qualified governments, projects, companies and individuals through the detailed comprehension and proper leveraging of usable assets, acquisition of adjustable collateral, debt reduction hedge strategies and opportunity analysis of changing market conditions, while furthering local and global communities to better living conditions.
</p>
</div>
<div>
<p align="left">Accounts, Cards and Payments<br />
Asset Management and Investments<br />
Private Client and Institutional Client Solution
</p>
</div>
<div><img src="images/blueVertNav/spacer.png" width="100%"/>
</div>
<div align="left">
<p><img src="images/blueVertNav/currentevents.png" width="100%" />
</p>
<p> </p>
<p>SFBBL is proud to announce our merger with Trust Bank, presently in eleven locations and expanding in Dubai, London and Vienna. Trust Bank has been an established fully operational Bank conducting full banking business for the last 20 years. SFBBL provides, The Private Client Premier Division which is the core focus of the addition of SFBBL, providing a select clientele with a niche portfolio of private banking solutions. Our premier services allow clients to access and securitize liquid capital as well as assets, internationally with great ease. Our account holders have access to a large number of private banking services including our three primary areas of service.
</p>
</div>
<div id="example4"><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
<div><img src="images/blueVertNav/askusaquestion.png" width="100%" border="0" />
</div>
<div><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
</div>
</div>
<div id="contentright">
<div id="contentright1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<!-- Exchange Rates Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #040442;text-align:left;">
<div style="text-align:left;background-color:#0A61A6;width:100%;border-bottom:0px;height:16px; font-size:12px;font-weight:bold;padding:5px 0px;">
<div align="center"><span style="margin-left:2px;background-image:url(http://www.exchangeratewidget.com/flag.png); background-position: 0 -1232px; width:100%; height:15px; background-repeat:no-repeat;padding-left:5px;">
<a href="http://www.exchangeratewidget.com/" target="_blank" style="color:#FFFFFF; text-decoration:none;padding-left:22px;">
US Dollar Exchange Rates</a>
</span>
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR,GBP,JPY,CHF,CAD,AUD,CNY,ZAR,RUB,BRL,HKD,MXN,&a=1&d=0A61A6&n=FFFFFF&o=FCF4F4&v=5">
</script>
</div>
<!-- End of Exchange Rates Script -->
</div>
<div id="contentright2">
<!-- Currency Converter Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #0A61A6;"><div style="text-align:center;background-color:#0A61A6;width:100%;font-size:13px;font-weight:bold;height:18px;padding-top:2px;">
<div align="center">
Currency Converter
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR&a=1&d=0A61A6&n=FFFFFF&o=FAF2F2&v=1">
</script>
</div>
<!-- End of Currency Converter Script -->
<div id="contentright3">
<div align="center">
<img src="images/MrPrivateMortgage_DreamHome.jpg" width="95%" />
</div>
</div>
<div id="contentright4">
<div align="center"></div>
</div>
</div>
</div>
<!-- End of Main Content -->
</div>
<!-- Start of Pic Slider -->
<!-- End of Pic Slider -->
<div class="clear"></div>
<!-- Start of Stock ticker -->
<div id="footer">
<div align="center">
<!-- START Worden Top Gainers Ticker Widget -->
<script src="http://widgets.freestockcharts.com/js/jquery-1.3.1.min.js" type="text/javascript">
</script>
<script src="http://widgets.freestockcharts.com/script/WBIHorizontalTicker2.js?ver=12334" type="text/javascript">
</script> <link href="http://widgets.freestockcharts.com/WidgetServer/WBITickerblue.css" rel="stylesheet" type="text/css" />
<script>
var gainTicker = new WBIHorizontalTicker('gainers');
gainTicker.start();
</script>
<!-- End Scrolling Ticker Widget -->
</div>
</div>
<!-- End of Stock ticker -->
<div class="clear"></div>
<!-- Start of bottom menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Privacy</li>
<li>Security</li>
<li>Copyright</li>
</ul>
</div>
</div>
<!-- End of bottom menu -->
<div id="header4" >
<p align="left" class="style3">
SFBBL is not a brick and mortar depository institution.
Our services are reserved for Private Banking clientele and qualified institutional investors.
SFBBL DOES NOT PROVIDE TAX ADVICE OF ANY KIND.
IT IS THE CUSTOMER'S RESPONSIBILITY TO COMPLY WITH THEIR COUNTRY'S TAX.
SFBBL IS A REGISTERED SWISS TRUST COMPANY. SFBBL IS NOT A REGISTERED BANK
</p>
</div>
<script>
var timeOnSlide = 3,
timeBetweenSlides = 2,
animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'Webkit Moz O Khtml'.split(' '),
pfx = '',
slidy = document.getElementById("slidy");
if (slidy.style.animationName !== undefined) { animation = true; }
if ( animation === false ) {
for ( var i = 0; i < domPrefixes.length; i++ ) {
if ( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
} } }
if ( animation === false ) {
// animate using a JavaScript fallback, if you wish
} else {
var images = slidy.getElementsByTagName("img"),
firstImg = images[0],
imgWrap = firstImg.cloneNode(false);
slidy.appendChild(imgWrap);
var imgCount = images.length,
totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1),
slideRatio = (timeOnSlide / totalTime)*100,
moveRatio = (timeBetweenSlides / totalTime)*100,
basePercentage = 100/imgCount,
position = 0,
css = document.createElement("style");
css.type = "text/css";
css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }";
css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }";
css.innerHTML += "#"+keyframeprefix+"keyframes slidy {";
for (i=0;i<(imgCount-1); i++) {
position+= slideRatio;
css.innerHTML += position+"% { left: -"+(i * 100)+"%; }";
position += moveRatio;
css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }";
}
css.innerHTML += "}";
css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }";
document.body.appendChild(css);
}
</script>
</body>
</html>
thanks in advance

Answer 1

you can use body{overflow-x: hidden;} in your CSS. However, I'd recommend restructuring your page so that the page isn't ~1500px wide.
Cheers!

Answer 2

Try to use this:
#content{
overflow-x: hidden;
}
#slider {
float: left;
overflow-x: hidden;
width: 100%;
}
#footer {
background-color: rgba(3, 3, 3, 0.7);
float: left;
height: 5%;
width: 99.9%;
}
Cheers!