The page I created has a horizontal scroll bar at the bottom that scrolls to a large white space. I want the page to be set to the browser's width so it doesn't show the horizontal scroll bar. Does anyone know what is wrong with my code?
This is what my page looks like. If I scroll to the right, a large white empty space shows: https://i.stack.imgur.com/AcJZv.png
Here is my code.
<html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fjalla One&family=Work Sans:wght@400;500;700&display=swap');
* {
margin: 0 auto;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.navbar {
background-color: black;
color: white;
position: fixed;
width: 100%;
padding: 20px;
z-index: 9999;
}
#page-container {
position: relative;
width: auto;
}
header img {
width: 20%;
height: 20%;
}
li.navigation {
display: inline-block;
padding: 3px 5px;
}
#outer {
position: relative;
}
#inner {
position: absolute;
margin: auto;
float: right;
background-color: burlywood;
text-align: center;
padding: 20px;
top: 350px;
left: 50px;
}
p.tiles {
color: black;
}
.container {
width: 100%;
text-align: center;
display: block;
padding-top: 20px;
}
.tiles {
border-radius: 10px;
display: inline-block;
width: 20%;
padding: 20px 50px;
margin: 20px;
border: 1px solid black;
background-color: white;
color: black;
}
#footer {
position: static;
right: 0;
bottom: 0;
left: 0;
padding: 1rem 5rem;
margin: 0 auto;
height: 24%;
background-color: black;
color: white;
text-align: left;
display: block;
}
.footer-links {
display: block;
list-style: none;
}
ul.footer-links {
line-height: 150%;
}
.inner-footer-container {
padding: 5px 0;
margin: 0 auto;
display: inline;
margin-right: 50px;
}
.form-container {
margin: 0px auto;
top: 50%;
left: 83%;
bottom: 100px;
position: relative;
}
</style>
<head>
<title>Application of Layout</title>
</head>
<body>
<header>
<div >
<ul>
<li >Home</li>
<li >About</li>
<li >Packages</li>
<li >Contact Us</li>
</ul>
</header>
</div>
<main>
<div id="page-container">
<div id="outer">
<img src="flatlay.jpg" style="width: 100%; height: 50%;">
<div id="inner">This is an example of a website</div>
<div >
<div >
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div id="footer">
<footer>
<div >
<ul >
<li><h2>Website.</h2></li><br>
<li><p>About</p></li>
<li><p>Press</p></li>
<li><p>Products</p></li>
<li><p>Careers</p></li>
<li><p>Customer Service</p></li>
<li><p>FAQs</p></li>
</ul>
<div >
<div >
<form >
<label for="email">Email Us:</label><br>
<input type="text" name="email" id="email" placeholder="[email protected]" required>
</form>
</div>
</div></div>
</ul>
</footer>
</div>
</div>
</body>
</html>CodePudding user response：
Your form width is 100% (default block style) but you moved it out with left: X% so your form is out of the container (check in devtools).
Do not use left (etc.) for relative elements.
You could rather use something like display: flex if you want to make 2 column layout in your footer.
@import url('https://fonts.googleapis.com/css2?family=Fjalla One&family=Work Sans:wght@400;500;700&display=swap');
* {
margin: 0 auto;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.navbar {
background-color: black;
color: white;
position: fixed;
width: 100%;
padding: 20px;
z-index: 9999;
}
#page-container {
position: relative;
width: auto;
}
header img {
width: 20%;
height: 20%;
}
li.navigation {
display: inline-block;
padding: 3px 5px;
}
#outer {
position: relative;
}
#inner {
position: absolute;
margin: auto;
float: right;
background-color: burlywood;
text-align: center;
padding: 20px;
top: 350px;
left: 50px;
}
p.tiles {
color: black;
}
.container {
width: 100%;
text-align: center;
display: block;
padding-top: 20px;
}
.tiles {
border-radius: 10px;
display: inline-block;
width: 20%;
padding: 20px 50px;
margin: 20px;
border: 1px solid black;
background-color: white;
color: black;
}
#footer {
position: static;
right: 0;
bottom: 0;
left: 0;
padding: 1rem 5rem;
margin: 0 auto;
height: 24%;
background-color: black;
color: white;
text-align: left;
display: block;
}
.footer-links {
display: block;
list-style: none;
}
ul.footer-links {
line-height: 150%;
}
.inner-footer-container {
padding: 5px 0;
margin: 0 auto;
display: inline;
margin-right: 50px;
}
.inner-footer-container {
display: flex;
}<header>
<div >
<ul>
<li >Home</li>
<li >About</li>
<li >Packages</li>
<li >Contact Us</li>
</ul>
</header>
</div>
<main>
<div id="page-container">
<div id="outer">
<img src="flatlay.jpg" style="width: 100%; height: 50%;">
<div id="inner">This is an example of a website</div>
<div >
<div >
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam
autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam
autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam
autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam
autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam
autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam
autem aut repudiandae amet?</p>
</div>
<div id="footer">
<footer>
<div >
<ul >
<li><h2>Website.</h2></li>
<br>
<li><p>About</p></li>
<li><p>Press</p></li>
<li><p>Products</p></li>
<li><p>Careers</p></li>
<li><p>Customer Service</p></li>
<li><p>FAQs</p></li>
</ul>
<div >
<div >
<form >
<label for="email">Email Us:</label><br>
<input type="text" name="email" id="email" placeholder="[email protected]"
required>
</form>
</div>
</div>
</div>
</footer>
</div>
</div>CodePudding user response：
You can hide horizontal scroll bar applying this style to body element:
body {
overflow-x: hidden;
}
CodePudding user response：
Always try to investigate what is specifically causing the overflow of an element instead of just hidding it globally with html|body|* { overflow-x: hidden; } like people might suggest sometimes. Global aggressive solutions to small and specific issues may fix a problem and create a dozen more.
I just tested deleting arbitrary elements and found that <div > was causing the overflow. You forced it to be at 83% left regardless of its other attributes and style properties (like width), so it did it.
When you want something to stick left or right, you may use float: right|left; along with the proper position and display attributes instead of the left or right property with a high value. The following changes must fix your problem:
<style>
/* ... */
.form-container {
margin: 0px auto;
top: 50%;
/* left: 83%; */
float: right;
bottom: 100px;
position: relative;
}
/* ... */
</style>
I changed it and tested it in my browser (using Firefox, last version).
The complete solution:
<!DOCTYPE html>
<html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fjalla One&family=Work Sans:wght@400;500;700&display=swap');
* {
margin: 0 auto;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.navbar {
background-color: black;
color: white;
position: fixed;
width: 100%;
padding: 20px;
z-index: 9999;
}
#page-container {
position: relative;
width: auto;
}
header img {
width: 20%;
height: 20%;
}
li.navigation {
display: inline-block;
padding: 3px 5px;
}
#outer {
position: relative;
}
#inner {
position: absolute;
margin: auto;
float: right;
background-color: burlywood;
text-align: center;
padding: 20px;
top: 350px;
left: 50px;
}
p.tiles {
color: black;
}
.container {
width: 100%;
text-align: center;
display: block;
padding-top: 20px;
}
.tiles {
border-radius: 10px;
display: inline-block;
width: 20%;
padding: 20px 50px;
margin: 20px;
border: 1px solid black;
background-color: white;
color: black;
}
#footer {
position: static;
right: 0;
bottom: 0;
left: 0;
padding: 1rem 5rem;
margin: 0 auto;
height: 24%;
background-color: black;
color: white;
text-align: left;
display: block;
}
.footer-links {
display: block;
list-style: none;
}
ul.footer-links {
line-height: 150%;
}
.inner-footer-container {
padding: 5px 0;
margin: 0 auto;
display: inline;
margin-right: 50px;
}
/* Use float instead of left in this case. */
.form-container {
margin: 0px auto;
top: 50%;
/* left: 83%; */
float: right;
bottom: 100px;
position: relative;
}
</style>
<head>
<title>Application of Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div >
<ul>
<li >Home</li>
<li >About</li>
<li >Packages</li>
<li >Contact Us</li>
</ul>
</header>
</div>
<main>
<div id="page-container">
<div id="outer">
<img src="flatlay.jpg" style="width: 100%; height: 50%;">
<div id="inner">This is an example of a website</div>
<div >
<div >
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div >
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet. Aut fuga autem aut Quis nostrum qui adipisci molestiae aut magnam autem aut repudiandae amet?</p>
</div>
<div id="footer">
<footer>
<div >
<ul >
<li><h2>Website.</h2></li><br>
<li><p>About</p></li>
<li><p>Press</p></li>
<li><p>Products</p></li>
<li><p>Careers</p></li>
<li><p>Customer Service</p></li>
<li><p>FAQs</p></li>
</ul>
<div >
<div >
<form >
<label for="email">Email Us:</label><br>
<input type="text" name="email" id="email" placeholder="[email protected]" required>
</form>
</div>
</div></div>
</ul>
</footer>
</div>
</div>
</body>
</html>