Extra space on the right hand side

October 1, 201412 yr

Hi, creating a website, and for some reason, i have excess space on the right side of my page that i can scroll to and for the life of me, i can't figure out how to get rid of it. Here is a screenshot:

Here is my code

HTML:

<html>
<head>
<title>Sugar Stop</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>



<div id="wrap">
<div id="container">
</div>

	<div id="header">
					<img src="images/mainlogo.png" class='MainLogo_size' align=left alt="Find out the challenge rules." align="left"></a>

		<div class="menu">
			<ul id="navigation" class="menu-item">
				<li><a href='homepage.html'>HOME</a></li>
				<li><a href='challenge.html'>CHALLENGE RULES</a></li>
				<li><a href='promise.html'>MY PROMISE</a></li>
				<li><a href='nominate.html'>NOMIATE FRIENDS</a></li>
				<li><a href='hypnosis.html'>HYPNOSIS SESSIONS</a></li>
				<li><a href='diary.html'>CHALLENGE DIARY</a></li>
				<li><a href='instruction.html'>FULL INSTRUCTIONS</a></li>
				<li><a href='contact.html'>CONTACT US</a></li>

			</ul>
		</div>
	</div>

	<div id="content"  > <p></p>
		<ul class="left">

		<table align=left border="0">

			<tr>
				<td>
				<!--LINK TO CHALLENEGE PAGE-->
				<a href='challenge.html'>
				<img src="images/challenge.png" class='Homepage_image_size' align=left alt="Find out the challenge rules." align="left"></a>
				</td>
		
				<td>
				<!--LINK TO PROMISE PAGE-->
				<a href='promise.html'>
				<img src="images/promise.png" class='Homepage_image_size' align=fixed alt="Find out the promise." align="left"></a>
				</td>
		
				<td>
				<!--LINK TO NOMIANTE FRIENDS PAGE-->
				<a href='nominate.html'>
				<img src="images/nominate.png" class='Homepage_image_size' alt="Nominate some of your friends."></a>
				</td>

				<td>
				<!--LINK TO HYPNOSIS SESSIONS PAGE-->
				<a href='hypnosis.html'>
				<img src="images/hypnosis.png" class='Homepage_image_size' alt="Find out the hypnosis sessions."></a>
				</td>
			</tr>
	
				<!--SSECOND ROW-->
				<tr>
				
				<td>
				<!--LINK TO DIARY PAGE-->
				<a href='diary.html'>
				<img src="images/diary.png" class='Homepage_image_size' alt="Keep track of your progress withe a diary." ></a>
				</td>
				
				<td>
				<!--LINK TO INSTRUCTION PAGE-->
				<a href='instruction.html'>
				<img src="images/instruction.png" class='Homepage_image_size' alt="Find out the full instructions."></a>
				</td>
			
				<td>
				<!--LINK TO FACEBOOK PAGE-->
				<a href='facebook.html'>
				<img src="images/facebook.png" class='Homepage_image_size' alt="some_text" ></a>
				</td>
				
				<td>
				<!--LINK TO DONTPANIC PAGE-->
				<a href='dontpanic.html'>
				<img src="images/panic.png" class='Homepage_image_size' alt="some_text" ></a>
				</td>

			</tr>
</table>

	</div>
<div id="footer">
				<img src="images/footer.png" class='Footer_image' alt="some_text" ></a>

</div>


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

CSS:

html, body 

{

display: block; 
margin: 0 0 0 0;
padding:0 0 0 0;

} 

#container{

float: left;
margin: 0;
width:100%;
}
#wrap{
margin: 0 auto;
}

#content {


width: 100%;
height: 500px;
padding: 0; 
background: #790584;
 }  

.MainLogo_size{
position: relative;
top: 30px;
left: 215px;

}

#header  {
background: url(../images/header.png) ;
background-repeat: repeat-x;
height:29%;
}  
    

.menu{
	width: 1380px;
	position: relative;
	top: -130px
 }
.menu ul{
margin-left: 650px; 
padding: 0;
float: left;
}

.menu ul li{
display: inline;
}

.menu ul li a{

font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-align: right;
font-size: 15px;
float: left;
text-decoration: none;
color: purple; 
padding: 5px 11px;
}


.menu ul li a:hover, .menu ul li .current{
background-color:#CB70D7;
}
	
	
.Homepage_image_size{

position: relative;
left: 175px;
top: 20px;
width: 267px;
height: 200px;

}
#footer{
float: left;
background: pink;
}

.Footer_image{

position: relative;
left: -60px;
width: 1700px;
}

October 1, 201412 yr

The white space?

October 1, 201412 yr

Author

Yes, sorry, the white space on the right. I can scroll to it, which i don't want to happen.

Edited October 1, 201412 yr by Navee

October 1, 201412 yr

It's down to the 1700px wide image in the footer

October 1, 201412 yr

Author

Thankyou! Wow, can't believe it was that. There is one more issue, below the "SugarStop!" logo, there is a white bar, i thought correcting the right side issue would remove this, but it hasn't, do you think you could help me with this also?

October 1, 201412 yr

There is one more issue, below the "SugarStop!" logo, there is a white bar,

It's being caused by the margins on the empty <p> element. Set the margins to 0 or delete it. Margins can extend outside of the parent container and push it away from the preceding container.

There are several other issues in the HTML code. There is no Doctype declaration as the first line. This will cause browsers to go into Quirks Mode with possibly poor results , especially in IE.

There is also a stray or redundant <ul> tag right in front of the <table> containing the images.

There is little actual text content. Most of the page appears to be images with alt text set. This is not the best way to go about it. Search engines prefer actual text content.

The CSS needs some overhauling as well.

October 1, 201412 yr

Author

This website will not be published online, its for a friend who plans to put it on a CD ROM, so the search engine part is not an issue, thank you, the suggestions you made have fixed the issue.

Could you explain a little more about the CSS overhauling?

I am new to HTML/CSS, im a self taught person, so i just learn as i go along.

October 1, 201412 yr

CSS overhaul could mean many things.

I would say look into your consistancy and keep your CSS DRY (Don't Repeat Yourself).

I've quickly gone over your code from a styling POV.

html, body {
   display: block; /* Do you need this ? */
   margin: 0;
   padding: 0;
} 

#container {
   float: left; 
   margin: 0;
   width: 100%;
}

#wrap {
   margin: 0 auto; /* Do you need this ? */
}

#content {
   width: 100%;
   height: 500px;
   padding: 0; 
   background: #790584;
}  

.main-logo-size{
   position: relative;
   top: 30px;
   left: 215px;
}

#header {
   background: url(../images/header.png);
   background-repeat: repeat-x;
   height:29%;
}  
    
.menu {
    width: 1380px;
    position: relative;
    top: -130px
}

.menu ul {
    margin-left: 650px; 
    padding: 0;
   float: left;
}

.menu ul li {
    display: inline;
}

.menu ul li a {
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
   text-align: right;
   font-size: 15px;
   float: left;
   text-decoration: none;
   color: purple; /* try to use hex or RBG */ 
   padding: 5px 11px;
}


.menu ul li a:hover, 
.menu ul li .current {
    background-color: #CB70D7;
}
	
	
.home-image-size{
    position: relative;
    left: 175px;
    top: 20px;
    width: 267px;
    height: 200px;
}

#footer {
    float: left;
    background: pink; /* try to use hex or RBG */ 
}

.footer-image {
    position: relative;
    left: -60px;
    width: 1700px;
}

I haven't looked at re-coding just the way it's written

Keep to a name convention, no need to name class .FrontLeft_right_Up - that's just confusing, use camel case, or hyphenated and no caps or even BEM/OOCSS, but that's another story.
Don't use colours, use HEX or RGB
Keep the gaps between your code consistent. This offers nothing towards the output, but merely reading the code.
Ask yourself why you are using ID's, do you need to ? Would a class be sufficient ?

Edited October 1, 201412 yr by CHEWX

Navee
1

October 1, 201412 yr

Author

Thanks CHEWX, for this tips. i managed to fix the issue with my code. But I have a new one haha, I want to have facebook and twitter logos, under my nav bar, but when I place them in the position I would like to be in, when i re-size the browser, the images move along the page. I would like them to not move at all and stay in one place.

Edit: I know my work is messy, I just want it to work first, then i will fix the messyness of the code

Here is the new code:

<!DOCTYPE html PUBLIC>

<html>
<head>
<title>Sugar Stop</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>



<div id="wrapper">


	<div class="header">
					<img src="images/mainlogo.png" class='MainLogo_size'  alt=""></a>
					<img src="images/smallfacebook.png" align=right class='Social_media_size' alt=""></a>
					<img src="images/twitter.png" align=right class='Social_media_size'  alt="" ></a>
					

		<div class="menu">
			<ul id="navigation" class="menu-item">
				<li><a href='homepage.html'>HOME</a></li>
				<li><a href='challenge.html'>CHALLENGE RULES</a></li>
				<li><a href='promise.html'>MY PROMISE</a></li>
				<li><a href='nominate.html'>NOMIATE FRIENDS</a></li>
				<li><a href='hypnosis.html'>HYPNOSIS SESSIONS</a></li>
				<li><a href='diary.html'>CHALLENGE DIARY</a></li>
				<li><a href='instruction.html'>FULL INSTRUCTIONS</a></li>
				<li><a href='contact.html'>CONTACT US</a></li>

			</ul>
		</div>
	</div>

	<div class="content"  >
		

		<table >

			<tr>
				<td>
				<!--LINK TO CHALLENEGE PAGE-->
				<a href='challenge.html'>
				<img src="images/challenge.png" class='Homepage_image_size' alt=""></a>
				</td>
		
				<td>
				<!--LINK TO PROMISE PAGE-->
				<a href='promise.html'>
				<img src="images/promise.png" class='Homepage_image_size'  alt=""></a>
				</td>
		
				<td>
				<!--LINK TO NOMIANTE FRIENDS PAGE-->
				<a href='nominate.html'>
				<img src="images/nominate.png" class='Homepage_image_size' alt=""></a>
				</td>

				<td>
				<!--LINK TO HYPNOSIS SESSIONS PAGE-->
				<a href='hypnosis.html'>
				<img src="images/hypnosis.png" class='Homepage_image_size' alt=""></a>
				</td>
			</tr>
	
				<!--SSECOND ROW-->
				<tr>
				
				<td>
				<!--LINK TO DIARY PAGE-->
				<a href='diary.html'>
				<img src="images/diary.png" class='Homepage_image_size' alt="" ></a>
				</td>
				
				<td>
				<!--LINK TO INSTRUCTION PAGE-->
				<a href='instruction.html'>
				<img src="images/instruction.png" class='Homepage_image_size' alt=""></a>
				</td>
			
				<td>
				<!--LINK TO FACEBOOK PAGE-->
				<a href='facebook.html'>
				<img src="images/facebook.png" class='Homepage_image_size' alt=""				></a>
				</td>
				
				<td>
				<!--LINK TO DONTPANIC PAGE-->
				<a href='dontpanic.html'>
				<img src="images/panic.png" class='Homepage_image_size' alt="" ></a>
				</td>

			</tr>
</table>

	</div>
<div class="footer">
<table>
<tr>
<td>
<img src="images/footer1.png" class='footer_images' alt=""></a>
</td>
<td>
<img src="images/footer2.png" class='footer_images' alt=""></a>
</td>
<td>
<img src="images/footer3.png" class='footer_images' alt=""></a>
</td>
<td>
<img src="images/footer4.png"  class='footer_images' alt=""></a>
</td>
<td>
<img src="images/footer5.png"  class='footer_images' alt=""></a>
</td>
</tr>
</table>


<img src="images/aboutus.png"  class='about_us' alt=""></a>



</div>

</div>

</body>
</html>


html,
 
 
body {
margin: 0;
padding: 0;
height: 100%;

}

.wrap{
margin-bottom:0;
}

.menu{
	width: 1380px;
	position: relative;
	top: -130px
 }
.menu ul{
margin-left: 650px; 
padding: 0;
float: left;
}

.menu ul li{
display: inline;
}

.menu ul li a{

font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-align: right;
font-size: 15px;
float: left;
text-decoration: none;
color: purple; 
padding: 5px 11px;
}

.menu ul li a:hover, .menu ul li .current{
background-color:#CB70D7;
}


.Social_media_size{
position:relative;
float:right;
}

.MainLogo_size{
position: relative;
top: 30px;
left: 215px;

}

.Homepage_image_size{

position: relative;
left: 210px;
top: 20px;
width: 100%px;
height: 200px;

}

#wrapper{
margin-left:auto;
    margin-right:auto;
    width:100%px;
}


.content {

background-color:#790584;
width: 100%;
height: 500px;
padding:0px;
padding-bottom:65px;
}  

.header  {
background: url(../images/header.png) ;
background-repeat: repeat-x;
height:200px;
padding: 0;
}  


.footer{

bottom:0;
width:100%;
height: 300px;
background: white;

}

.footer_images{

position: relative;
left: 200px;
width: 200px;
}

Edited October 1, 201412 yr by Navee

October 2, 201412 yr

Use Margin: 0 auto to the class #container { }. and i am pretty sure it will work. also reduce some with form 100%. use 80% or 70%. it will work.

Extra space on the right hand side

Featured Replies

Create an account or sign in to comment

Similar Content

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)