Navigation bar moving left/right - html
I have two simple pages. The only thing that changes is the content in <content> tag.
But the navigation bar is not exactly at same position on the two pages. It's more to the left on the about.html page. The navigation bar is ~4px offset on my computer, I need two tabs open and switch between them to see the problem.
I tested it with lastest Chrome and Firefox browsers. The problem only occurs with the computer with a browser at full screen.
After using Chrome debug I found something strange.
On home page, the html tag is 1513px witdh, with the other page it is 1496px width?!
Home.html
About.html
Home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
About page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
What's causing this?
It's not just your navigation bar that is moving, it's your whole body element. Furthermore, it only seems like it's moving, but it's actually working as intended. The value auto on body's margin will always center the body element.
The home page does not have any scrollbar, but the about page has a vertical scrollbar on the right side of the page. The scrollbar takes up some width of the html element. As a result, the widths of the html element in your home page and about page are different. For instance, on my computer screen, the html element in the home page has a width of 1149px. Meanwhile, the html element in the about page has a width of 1132px. As you can see, the html width in the about page is smaller. Note that the width of the scrollbar may differ, but in my case, it has a width of 17px.
So my html element has a smaller width in the about page. So what? Well, this causes the auto values of margin in the home page and about page to be different (because the about page needs less margin to center the body element). As a result, it seems like the body element is moving.
Solution #1
What can we do? The most obvious solution is to hide the scrollbar visually. You can do this by giving scrollbar-width: none to the html element. This still allows the user to scroll (using mouse wheel), but you simply can't drag the scrollbar anymore (because it isn't there visually). Run these two snippets in your browser, the body element shouldn't be moving.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
scrollbar-width: none;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
Solution #2
The previous solution might be a little bad for user experience simply because the presence of a scrollbar means that the page can be scrolled. The absence of one means the contrary. Besides, scrolling by dragging the scrollbar directly is also a really common behavior. As an alternative, you can opt to use this other solution.
This solution is to give the html element a width of 100vw (100% of the viewport width). What this means is that even when there is a scrollbar in your html element, the html element will stay at a width of 100vw before scrollbar and the scrollbar will be added to the html. However, doing so makes the html element to have a width of more than 100vw. Its width is now 100vw + scrollbar's width. This will cause an overflow on the x-axis of the html element, thus causing a horizontal scrollbar to appear. We can remove the horizontal scrollbar using overflow-x: hidden.
Now, the scrollbar remains and your body element does not move. Try running these two snippets on your computer, you'll see that it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
width: 100vw;
overflow-x: hidden;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Nablo
</title>
<style>
html {
background-color: white;
width: 100vw;
overflow-x: hidden;
}
body {
margin: auto;
padding: 20px;
max-width: 720px;
text-align: left;
background-color: transparent;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: #3273dc;
text-decoration: none;
}
a:hover {
color: #63ccff;
}
a:visited {
color: #8559da;
}
h2 a {
font-weight: 400;
color: #000;
text-decoration: none;
}
nav a {
margin-right: 10px;
}
footer {
padding: 25px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2>
Nablo
</h2>
<nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
</nav>
</header>
<main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
</main>
<footer>
Made wih ♥ using nablo
</footer>
</body>
</html>
The difference is from the setting margin: auto; which centers the body automatically (but for one of the pages, the longer content, the width is a bit smaller.. thus the difference.)
However, one of the pages (home) has a height of over 1000px, and the other (about) page, is very low height
if you add to the css html tag the following:
html{
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
to force the vertical scroll to be always visible, you will have the pages identical and not moving.
You can achieve the same by adding a min-height value of something relevant to your longest page content, which is mostly an unknown value, and for each visitor it might differ based on their screen size.
Related
How do I keep this box from going off the side of my page?
I have a box titled "Sections" on a web page I am creating. The box appears normally when my window is full screen (see first image).
First Image
However, when I make the window smaller, my box drifts off of the screen (see second image).
Second Image
I want to make my site so that when I size my window down, the box still fully appears on the screen. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="good, website, super">
<meta name="description" content="This is a super good website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="apple.jpg">
<link rel="stylesheet" href="samplestyles.css">
<title>Super Good Website!</title>
</head>
<body>
<h1 id="top">Welcome!</h1>
<br>
<nav>
W3 Schools Website
Cool Math Games
Youtube
</nav>
<br>
<aside>
<h2>Sections</h2>
<ul>
<li>Top</li>
<li>Bottom</li>
</ul>
</aside>
<section>
<p id="lorem">
I need this to be a long section so I can scroll. Enjoy some lorem ipsum.<br>
Lorem ipsum dolor sit amet. Est placeat quae eos nemo molestiae ut dolorum repellendus et magnam velit sed consequatur assumenda hic cumque molestiae. Est laudantium
eius et exercitationem eligendi sed labore fugiat sed porro officiis rem laudantium pariatur. Est iure autem quo assumenda quod quo suscipit minima est expedita magni
et distinctio dolores qui quae natus. Est expedita quasi ab expedita magnam aut facilis rerum est atque eveniet vel esse voluptatem. Ut error eos fugit commodi est
exercitationem ratione non magnam atque et delectus quia sed explicabo libero. Eos assumenda consectetur vel doloremque nobis a voluptatem distinctio ut ipsam earum non
quibusdam expedita non sint nemo est laudantium aspernatur! Non delectus repellendus qui corporis neque qui ducimus soluta ut explicabo quod. Non quisquam
exercitationem cum suscipit Quis qui sunt accusantium et nesciunt temporibus. Et nihil nostrum ea molestiae vitae sed voluptates voluptas aut autem magnam est
rerum adipisci et veritatis consequatur. Qui necessitatibus debitis id labore corrupti aut pariatur officiis aut esse minus id voluptatem illo ab molestiae pariatur? 33
ullam nobis sed fuga ipsam ut maiores odit 33 ipsum maxime. Et enim totam qui fugiat rerum ut corrupti voluptatem aut laborum ullam ut harum fugiat. Eum ipsam placeat
et animi doloremque et magni eveniet sit omnis odit. Qui officiis tempore in animi vitae sit maxime dolore sit incidunt natus sit omnis recusandae. Ut eius repellendus
ut rerum voluptate sit atque quod aut omnis sapiente. 33 distinctio pariatur et dolorem beatae et sunt consequatur. Aut odio doloremque id consequatur aspernatur et
sunt molestiae sed aliquam earum ab quam veritatis hic odio nulla. Qui quod nihil sed rerum magni ab rerum minima eum deleniti facilis! Aut quia nemo in officia nisi et
Quis laborum. Qui autem quibusdam qui quia molestiae aut dolorum voluptatem non voluptatem quam sed voluptatem quam ut deleniti labore non eaque modi. Nam beatae
totam et aperiam sunt 33 quam quas sit quia internos aut rerum omnis. Et magnam facere qui itaque corrupti id reprehenderit iure sit laborum ipsam eum animi magnam ut
inventore dolorum non saepe temporibus. Non veniam delectus qui sunt iste a repudiandae nostrum. Non inventore quibusdam non itaque velit non esse voluptatem id natus
quia et fuga enim id saepe voluptatem eos culpa nulla? Quo quam harum non perferendis illo eum ullam quia est dolore amet aut atque culpa. Et assumenda nostrum est
alias molestiae exercitationem asperiores eos doloribus tempore ut provident amet ad ipsa sint. Et consequuntur unde et praesentium ipsa sed facere aperiam. Non
obcaecati internos cum numquam sunt sit voluptas voluptatem non blanditiis nostrum id eligendi soluta aut atque ratione et earum quam. Est dicta Quis vel doloribus
debitis eos quae minus quo praesentium consequatur. Qui eius nobis ut voluptate aspernatur et asperiores placeat et quidem illum sit pariatur dolores ut Quis harum ut
culpa<span id="bottom"> voluptas.</span>
</p>
</section>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
h1{
background-color: gray;
padding: 5px;
color: #EAD94C;
text-align: center;
font-size: 60px;
outline: 40px solid gray;
}
nav{
background-color: gray;
color: #5D2E8C;
font-size: 20px;
outline: 8px solid gray;
text-align: center;
}
aside{
padding: 20px;
border: thin solid white;
margin-bottom: 1000px;
position: fixed;
left: 90%;
}
section{
font-size: 25px;
}
#lorem{
max-width:88%;
padding-left: 5px;
}
Any help is appreciated.
As Adil already answered, but i would like to make it a bit more clear to you. when you gave left: 90%; you explicitly said that every time the left side of your aside element should be 90% away from the left side of the body and that's exactly what was happening. The width of the aside overflew while the left side remain at 90%. When you give right: 10%; you do the same but with right position now. Which is better in you case. Hope that explains rather than just solving the problem.
Change your aside style to this:
aside{
padding: 20px;
border: thin solid white;
margin-bottom: 1000px;
position: fixed;
right: 30px;
}
It is a quick fix but if you want your website response you have to restructure a lot.
Remove left: 90%; and add right: 0; so the element gonna be fixed on the right place add z-index: 1000; so the element gonna be on the top of all others element.
aside{
padding: 20px;
border: thin solid white;
margin-bottom: 1000px;
position: fixed;
right: 0;
z-index: 1000;
background-color: black;
}
How to make two paragraphs of a text wrap around an image from both sides?
After spending a lot of time I finally managed to do this:
window.onload = () => {
const fimg = document.querySelector('#first img')
const fimgWidth = fimg.getBoundingClientRect().width
const simg = document.querySelector('#second img')
const simgWidth = simg.getBoundingClientRect().width
fimg.style.left = `${fimgWidth/2}px`
simg.style.right = `${simgWidth/2}px`
}
div {
display: flex;
}
p {
flex: none;
width: 50%;
}
img {
shape-outside: url("https://openclipart.org/download/318603/hand-written-circle-04.svg");
position: relative;
}
#first img {
float: right;
}
#second img {
float: left;
}
<div>
<p id="first">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<span>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>
</p>
<p id="second">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<span>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>
</p>
</div>
I think my intent is clear: I have two paragraphs of text stacked horizontally, I place an image between them, I want them to wrap around this image nicely.
Even though the above solution does what I want I still have strong doubts if it is the right solution:
Isn't getting the width of the image via Javascript a sign that I must've missed some obvious CSS way of doing this?
I want to place here a randomly chosen image out of a pool of available images, so I don't want to hardcode the image's width
I had to resort to superimposing two copies of this image on top of each other. Do I really need to have two images where I want just one?
This didn't happen here or at least, if it happened, it is not evident because the image I chose to show the problem is so simplistic that it doesn't matter. But isn't stacking the images on top of each other plus the computations I'm doing here a recipe for images being stacked on each other incorrectly (one image being moved by a pixel in either direction relative to the other image) due to rounding errors and sub-pixel problems?
Is there a more right-handed way of doing this?
CSS Exclusions would help here: it allows you to wrap text around any element. Unfortunately, this spec is still a working draft, and no browsers support it yet.
Make a shrinkable header with "sticky"
I'd like to make a part of my header stick on scroll while the top part disappear:
body {
/* Allows to scroll */
width: 15em;
}
header {
width: 100%;
}
header a {
display: block;
background-color: red;
}
#title {
position: sticky;
top: 0;
}
<body>
<header>
<h1>
<a href="index.html">
<div id="caption">Some text</div>
<div id="title">Main title</div>
</a>
</h1>
</header>
<p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
<p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
<p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
<p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
<p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>
But as you can see, that doesn't work as intended. How can I achieve that?
sticky need to be on the h1 element and you consider negative top value to achieve whant you want but you need to find the correct value based on the height of the caption
body {
/* Allows to scroll */
width: 15em;
}
header {
position: sticky;
top: -40px;
}
header a {
display: block;
background-color: red;
}
<body>
<header>
<h1>
<a href="index.html">
<div id="caption">Some text</div>
<div id="title">Main title</div>
</a>
</h1>
</header>
<p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae
porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
<p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
<p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
<p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
<p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>
From the MDN : "stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent."
Here its parent is <a href="index.html"> so when you scroll, #title will scroll up with its parent.
If you want #title to stick to the top of the body you need the body to be its direct parent.
In the snippet I used both position: sticky; and position: -webkit-sticky; because Safari need the prefix.
body {
/* Allows to scroll */
width: 15em;
}
header {
width: 100%;
}
header a {
display: block;
background-color: red;
}
#title {
background-color: red;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<body>
<header>
<h1>
<a href="index.html">
<div id="caption">Some text</div>
</a>
</h1>
</header>
<div id="title"><h1>Main title</h1></div>
<p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
<p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
<p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
<p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
<p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>
Hi! How can I make the footer stay at the bottom just like on StackOverflow?
Below is my code. When I open the page it is at the bottom but it stays on the content and when I scroll it remains in the same position, the content continuing to go below it. When I change the position to relative, it goes under the top menu.
No answer to previous questions on this site helped me. That's why I'm making a new question.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
font-family: Segoe UI;
}
html, body {
height: 100%;
}
.sus {
width: 100%;
margin: 0px;
background-color: #ced6e2;
padding: 15px;
}
h1 {
margin: 0;
}
.meniusus {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
margin: 0;
background-color: #0b3475;
padding: 5px;
}
.meniusus ul {
list-style-type: none;
}
.meniusus li {
display: inline;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.stanga {
width: 25%;
float: left;
}
.dreapta {
float: right;
width: 75%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.footer {
width: 100%;
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div class="sus">
<h1> Site grozav </h1>
</div>
<div class="meniusus">
<ul>
<li> Acasa
<li> Pagina 1
<li> Pagina 2
<li> Pagina 3
<li> Contact
</ul>
</div>
<div class="stanga clearfix">
<ul>
<li> Element 1
<li> Element 2
<li> Element 3
<li> Element 4
<li> Element 5
</ul>
</div>
<div class="dreapta">
<h2> Titlu </h4>
<p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br></p>
</div>
<div class="footer">
<i class='fab fa-facebook-square' style='font-size:24px'></i>
<i class="material-icons" style="font-size:30px">email</i>
<i class='fas fa-phone' style='font-size:24px'></i>
</div>
</div>
</body>
</html>
The reason for this is that position:aboslute is relative to the screen, not the page. It does not sit at the bottom because .dreapta has float:right. Just set the footer's clear to both, like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' crossorigin='anonymous'>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
font-family: Segoe UI;
}
html, body {
height: 100%;
}
.sus {
width: 100%;
margin: 0px;
background-color: #ced6e2;
padding: 15px;
}
h1 {
margin: 0;
}
.meniusus {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
margin: 0;
background-color: #0b3475;
padding: 5px;
}
.meniusus ul {
list-style-type: none;
}
.meniusus li {
display: inline;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.stanga {
width: 25%;
float: left;
}
.dreapta {
float: right;
width: 75%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.footer {
width: 100%;
display: block;
clear: both;
background-color: lightblue;
}
#minheight {
height: calc(100vh - 164px);
}
</style>
</head>
<body>
<div id="container">
<div class="sus">
<h1> Site grozav </h1>
</div>
<div class="meniusus">
<ul>
<li> Acasa
<li> Pagina 1
<li> Pagina 2
<li> Pagina 3
<li> Contact
</ul>
</div>
<div class="stanga clearfix">
<ul>
<li> Element 1
<li> Element 2
<li> Element 3
<li> Element 4
<li> Element 5
</ul>
</div>
<div class="dreapta">
<h2> Titlu </h4>
<p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br></p>
</div>
<div class="footer">
<i class='fab fa-facebook-square' style='font-size:24px'></i>
<i class="material-icons" style="font-size:30px">email</i>
<i class='fas fa-phone' style='font-size:24px'></i>
</div>
</div>
<div id='minheight'></div>
</body>
</html>
Note: The above code has #minheight to keep the footer at the bottom of the page if there isn't enough content
How to make background colour always stick to 100% of a div, even when it's scrolled?
I have a div element with a width: 100% style. However, when I zoom up and horizontally scroll, the background disappears! Here's what I mean: http://i.imgur.com/HTU9m3d.png. Is there a way to make the background colour of the top bar div always fill the width of the screen? I am willing to use JavaScript but I'd rather not if there's a CSS solution that's fairly cross-browser. EDIT: JSFiddle
One common way to do it is to specify the size of the container, give it overflow:auto and set the background-size to cover:
height: 100vh; /* change this to whatever else fits your case*/
background-size: cover;
overflow: auto;
That's the basics, the rest is depending on your needs. Also note that if you use an element that is not displayed as block level by default, you probably want to add display:block or display:inline-block; to it and depending on case, set a width for it.
Here's a working example. Apart from the properties specified above, you don't need much from it (i.e: I added a fixed overlay to make sure the text reads, because it's a random image and it could be white and, most likely, you don't need it):
body {
margin: 0;
}
.fixed-bg {
background: url("https://unsplash.it/1200/800") no-repeat 50% 50% /cover;
height: 100vh;
overflow: auto;
padding: 1rem;
position: relative;
color: white;
box-sizing: border-box;
}
.fixed-bg > *{
position: relative;
}
.overlay {
position: fixed;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,.35);
}
<div class="fixed-bg">
<div class="overlay"></div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
You should try this background: url(images/example.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
Change the css:
#topbar
{
width:115%;
}