CODEWITHSUNDEEP
htmlwidth
Logan Clark
Logan Clark

Reputation: 1

How to fix width of an HTML webpage

So I am coding my final project for HTML and when formatting pictures, I accidentally put it too far to the right and it extended my web page horizontally and now that I have fixed the image there is a lot of extra space on the right side. The same thing happened vertically but I just set my height to 100% for my body tag and it took care of it, I tried doing this with width but it just shrinks my content while not changing the physical size of the web page. I would appreciate any help you guys could provide. Here is picture of the web page enter image description here

Here is code

<html>
<title> Bodybuilding </title>


<head>
<style>

.image1 {
	z-index: -1;
	
}

.active {
	background-color: #000000
}

.image2 {
	position: absolute;
	right: 26px;
	top: 10px;
}
.title {
	position: relative;
	top: -250px;
	border-style: solid;
	border-color: #0E878A;
	font-size: 49.5px;

}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	top: -245px;
	background-color: #333;
	border-top: 2px solid #bbb;
	border-left: 2px solid #bbb;
	border-bottom: 2px solid #bbb;
	border-radius: 10px;
}
li {
	float: left;
	border-right: 2px solid #bbb;
	
	
}

li a {
	display: inline;
	color: #0E878A;
	text-align: center;
	padding: 15px;
	text-decoration: none;
	font-size: 35px;
}
li a:hover {
	background-color: #111;
}

h2 {
	position: relative;
	top: -797px;
}

p {
	position: relative;
	top: -797px;
	font-size: 30px;
}

.arnold {
	position: relative;
	left : 1130px;
	top: -235px;


}

body {
	background: linear-gradient(#939FA0,#41858B);
	height: 100%;
	width: 98.27%;

}

h3 {
	position: relative;
	top: -765px;


</style>
</head>

<div class="image1">
	<img src="bbifbb.png" width="359" height="250">
</div>
<div class="image2">
	<img src="bbphil.jpg" width="359" height="250">
</div>

<div class ="title">
<center>
<h1> Bodybuilding </h1>
</center>
</div>

<body bgcolor="#939FA0">

<body>

<ul>
	<li><a class = "active" href="bbfinal.html">Home</a></li>
	<li><a href="bbfamous.html">Famous Bodybuilders</a></li>
	<li><a href="bbolympia.html">Mr. Olympia</a></li>
	<li><a href="bbsteroids.html">Steroids</a></li>
	<li><a href="bbmodern.html">Modern Bodybuilders</a></li>
	<li><a href="bbcompetitions.html">Competitions</a></li>
	<li><a href="bbimagemap.html">Find Competitions</a></li>
	<li><a href="bbcontact.html">Contact Me</a></li>
	

</ul>

<div class ="arnold">
<img src="bbarnold.jpg">
</div>

Upvotes: 0

Views: 68

Answers (1)

Andrew Fan
Andrew Fan

Reputation: 1322

You are doing the following in your code:

.arnold {
    position: relative;
    left : 1130px;
    top: -235px;
}

Since the position is relative, the left property sets the left edge of all elements with class 'arnold' to be 1130 pixels to the right of their normal position. That results in the extra scroll space to the right.

Upvotes: 1

Related Questions