Home/ Questions/Q 9030643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T07:32:29+00:00

my website has a scroll bar that goes quite far over to the right

  • 0

my website has a scroll bar that goes quite far over to the right and one that goes down. nothing is displayed in these areas so the scroll bar is unecesary! if anything it could fit all on one page. these creates a lot of white space around my page.

how can i stop this from happening?

   <!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future  </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->

</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color:  #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>


<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1> 
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<a href="http://twitter.com/louismoore18"><img src="twitter.png" class="image2" border="0" alt="."></a>
</div>
<div class="box1">

</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>

EDIT: this is how it should look like

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s an artifact of the relative positioning and setting a left value.

    Remove it, and the extra space goes away.

    Demo

    EDIT

    You do not need any relative positioning. The design you are trying to accomplish can be created much more simply with text-align: center.

    HTML

    <div>
  <img src="//placehold.it/200x200">
  <h1>Welcome to my page</h1>
  <h2>Coming Soon...</h2>
  <h3>But for now follow me on Twitter</h3>
</div>​

    CSS

    @import url(http://fonts.googleapis.com/css?family=Paytone+One);

div {
    text-align: center;
    background: #ddd;
    border-bottom: 3px solid red;
    margin: 5px;
    padding: 10px;
    font-family: 'Paytone One', sans-serif;
    font-size: 24px;
}

h1 { 
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
    color: red;
}

img {
    width: 200px;
    height: 200px;
    }​

    Demo

    • 0