I'm struggling with this CSS card, I want it over the background image, but I don't know how, I already tried positioning
I accidentally placed the background image in the header, but I changed it to a div but it still doesn't work
Can someone help?
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.titel h1 {
color: white;
font-size: 70px;
}
div.ondertitel h3 {
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
.card {
position: absolute;
margin: 30px;
padding: 10px;
background: rgb(139, 119, 167);
background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<html>
<body>
<div class="header">
<div class="head">
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li class="huidig">Randapparatuur</li>
<li>Opbouw van de computer</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/randapparatuur.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed
leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam.
Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc
eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</body>
</html>
ignore:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Class .card having position: absolute which cause the issue.
Added .main-content div with background image cover.
Example: https://codepen.io/cursorrux/pen/LYRjQqG
May be this helps you:
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/foto_beginpagina.jpg');
height: 50vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-flex;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.titel h1{
color: white;
font-size: 70px;
}
div.ondertitel h3{
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
/* div having background image */
.main-content {
background-image: url('https://murraysinteriors.com.au/wp-content/uploads/2018/09/dummy-banner.jpg');
padding: 5px;
background-size: cover;
}
.card{
margin: 30px;
padding: 10px;
background: rgb(139,119,167);
background: radial-gradient(circle, rgba(139,119,167,1) 0%, rgba(139,122,140,1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<div class="header">
<div class="head">
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li class="huidig">Randapparatuur</li>
<li>Opbouw van de computer</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-image">
<img src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
Related
I am trying to build a responsive Website. With quite an effort (and help from the community) I managed to mount a fixed background image. But now I am encountering two issues:
With small screens, the content of the elements in front of the image is cut off at the bottom, scrolling is not possible.
The footer is overlapping the other elements.
html/ css:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Homepage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {
box-sizing: border-box;
font-size: 62.5%;
}
Body {
font-size: 1.6px;
font-size: 1.6rem;
line-height: 1.5;
font-family: "Courier New", Courier, sans-serif;
color: black;
display: flex;
flex-direction:column;
}
#backgroundImage {
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
#backgroundImage::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('ImageLake.bmp');
background-size: cover;
opacity: 0.1;
}
#Page {
position: fixed;
top: 0;
width: 95%;
background-color: rgba(0, 0, 0, 0.2);
margin: 0.3em auto;
border: 0.3em solid #00ccff;
border-radius: 5em;
}
#Logo {
font-size: 3.5rem;
font-weight: 650;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0.5em;
letter-spacing: 0.2em;
}
#Center {
height: auto;
}
footer {
position: absolute;
bottom: 0;
}
/* -- STYLES FOR NAVIGATION-MENU -- */
ul#navMain {
list-style-type: none;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
}
li.menu-eintrag a:hover {
font-weight: bold;
}
.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,204,255,0.4);
border-radius: 5em;
white-space: nowrap;
}
.terminvereinbarung a:hover {
border: 0.5em dotted rgba(50,204,255,1);
border-radius: 5em;
}
.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,0,0,0);
border-radius: 5em;
white-space: nowrap;
}
.menu-eintrag a:hover {
border: 0.5em solid rgba(255,255,255,0.4);
border-radius: 5em;
}
#media screen and (min-width: 40em) {
#nav {
display: table;
margin: 0 auto;
}
#nav li {
font-size: 80%;
width: auto;
display: inline;
white-space: nowrap;
}
#Center {
display: inline-block;
padding: 0 1em;
}
#begruessung {
text-align: center;
}
#ColumnRight {
padding: 1em;
}
}
#media screen and (min-width: 64em){
header {
padding-top: 0em;
}
#Content {
display: flex;
}
#nav,
#ColumnRight {
width: 20%;
float: left;
}
#nav li {
display: block;
font-size: 100%;
width: 100%;
float: none;
padding: 1em;
}
#Center {
float: left;
padding: 0em 3em;
width: 50%;
}
#begruessung {
text-align: left;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
}
#ColumnRight a:link,
#ColumnRight a:visited,
#ColumnRight a:hover,
#ColumnRight a:focus,
#ColumnRight a:active {
}
}
</style>
</head>
<body>
<div id="backgroundImage">
<div id="Page">
<header>
<div id="Logo">
Header of the Page
</div>
</header>
<div id ="Content">
<nav id="nav">
<ul id="navMain">
<li class="terminvereinbarung">Alpha
<li class="menu-eintrag">Beta
<li class="menu-eintrag">Gamma
<li class="menu-eintrag">Delta
<li class="menu-eintrag">Epsilon
</ul>
</nav>
<div id="Center">
<h1 id="begruessung">
Welcome at our place! </h1>
<h2>
We are opening soon.
</h2>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
</div>
<aside id="ColumnRight">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
</aside>
</div>
</div>
</div>
<footer>
<ul id="footerList" >
<li class="footer-menu-eintrag">© 2021 Mister Me
<li class="footer-menu-eintrag">Contact
<li class="footer-menu-eintrag">Alpha
<li class="footer-menu-eintrag">Beta
</ul>
</footer>
</body>
</html>
How can I make the content of the elements in the foreground scrollable?
How can I move the footer to the bottom without it overlapping the other elements?
to avoid cut off of content at the bottom change #page position fixed to relative.
#page{
position: relative;
}
then a scrollbar will appear.
2. to avoid overlapping of footer use:
footer{
position:relative;
bottom:0;
}
and to be honest your styling practice is not good. You should use class to style elements instead of ids.
There were actually quite a few tweaks that I think should be made to get you what you wanted.
Firstly, the background. I would go with position: fixed; rather than position: absolute; to make sure the background is completely independent of the content.
Secondly, the footer does not need the position attribute set, rather you could make it part of the flexbox layout, setting the flex attribute on your #backgroundImage element (and removing the position attribute from backgroundImage).
Lastly, make sure the html and body tags have a full height set in the CSS so everything will scale on larger screens.
You end up with something like:
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}
body {
height: 100%;
font-size: 1.6px;
font-size: 1.6rem;
line-height: 1.5;
font-family: "Courier New", Courier, sans-serif;
color: black;
display: flex;
flex-direction: column;
}
#backgroundImage {
height: auto;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
#backgroundImage::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg');
background-size: cover;
opacity: 0.1;
}
#Page {
width: 95%;
background-color: rgba(0, 0, 0, 0.2);
margin: 0.3em auto;
border: 0.3em solid #00ccff;
border-radius: 5em;
}
#Logo {
font-size: 3.5rem;
font-weight: 650;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0.5em;
letter-spacing: 0.2em;
}
#Center {
height: auto;
}
footer {
flex-shrink: 0;
}
/* -- STYLES FOR NAVIGATION-MENU -- */
ul#navMain {
list-style-type: none;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
}
li.menu-eintrag a:hover {
font-weight: bold;
}
.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,204,255,0.4);
border-radius: 5em;
white-space: nowrap;
}
.terminvereinbarung a:hover {
border: 0.5em dotted rgba(50,204,255,1);
border-radius: 5em;
}
.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,0,0,0);
border-radius: 5em;
white-space: nowrap;
}
.menu-eintrag a:hover {
border: 0.5em solid rgba(255,255,255,0.4);
border-radius: 5em;
}
#media screen and (min-width: 40em) {
#nav {
display: table;
margin: 0 auto;
}
#nav li {
font-size: 80%;
width: auto;
display: inline;
white-space: nowrap;
}
#Center {
display: inline-block;
padding: 0 1em;
}
#begruessung {
text-align: center;
}
#ColumnRight {
padding: 1em;
}
}
#media screen and (min-width: 64em){
header {
padding-top: 0em;
}
#Content {
display: flex;
}
#nav,
#ColumnRight {
width: 20%;
float: left;
}
#nav li {
display: block;
font-size: 100%;
width: 100%;
float: none;
padding: 1em;
}
#Center {
float: left;
padding: 0em 3em;
width: 50%;
}
#begruessung {
text-align: left;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
}
#ColumnRight a:link,
#ColumnRight a:visited,
#ColumnRight a:hover,
#ColumnRight a:focus,
#ColumnRight a:active {
}
}
<div id="backgroundImage">
<div id="Page">
<header>
<div id="Logo">
Header of the Page
</div>
</header>
<div id ="Content">
<nav id="nav">
<ul id="navMain">
<li class="terminvereinbarung">Alpha
<li class="menu-eintrag">Beta
<li class="menu-eintrag">Gamma
<li class="menu-eintrag">Delta
<li class="menu-eintrag">Epsilon
</ul>
</nav>
<div id="Center">
<h1 id="begruessung">
Welcome at our place! </h1>
<h2>
We are opening soon.
</h2>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
</div>
<aside id="ColumnRight">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
</aside>
</div>
</div>
</div>
<footer>
<ul id="footerList" >
<li class="footer-menu-eintrag">© 2021 Mister Me
<li class="footer-menu-eintrag">Contact
<li class="footer-menu-eintrag">Alpha
<li class="footer-menu-eintrag">Beta
</ul>
</footer>
I have copied and paste the following code and I want to apply this to my website. It should float at the right bottom.
I'm just a noob, I haven't tried anything, since I just don't know.
<div class="float" />
<div class="dot" />
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="verkoper" src="https://d2tyltutevw8th.cloudfront.net/media/image/trump-round-1500174198.jpg" />
</div>
<div class="at-about-fab__meta">
<h2>Call us now!</h2>
<p>12345567890</p>
</div>
</div>
</div>
.float{
position:fixed;
width:290px;
height:100px;
bottom:14px;
right:10px;
background-color:4d4d4d;
opacity: 0.1;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
opacity=50;
}
.dot {
position: absolute;
right: 215px;
display:block;
z-index:1000000;
bottom: 30px;
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
width: 14px;
height: 14px;
background: #228B22;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
}
.dot:hover{
// Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1)
background-color:rgba(100,100,100,0);
opacity:0;
}
.at-about-fab {
z-index: 999999;
position: fixed;
right: 40px;
bottom: 40px;
display: flex;
align-items: center;
flex-direction: row;
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -88px;
background: #FFFFFF;
width: 78px;
height: 78px;
border: 4px solid #EEEEEE;
border-radius: 100%;
padding: 1px;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: show;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 1;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 500;
}
.at-about-fab__meta p {
color: #1a9228;
font-size: 24px;
font-weight: 300;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 700;
text-decoration: none;
}
I want just everything floating at the right corner, i cannot seperate css and html since its going via tag manager.
By the way, I also please want to blur the background of the class=float, but do not know how.
Can someone help me?
So I checked your code and there were a few typos. First there is a </div> too much. And in your css you use opacity, change the = to :. Also the dot position has to be fixed and not absolute. And for the blur you can add this backdrop-filter: blur(10px);
.float{
position:fixed;
width:290px;
height:100px;
bottom:14px;
right:10px;
background-color:4d4d4d;
opacity: 0.1;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
opacity:50;
backdrop-filter: blur(10px);
}
.dot {
position: fixed;
right: 215px;
display:block;
z-index:1000000;
bottom: 30px;
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
width: 14px;
height: 14px;
background: #228B22;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
}
.dot:hover{
background-color:rgba(100,100,100,0);
opacity:0;
}
.at-about-fab {
z-index: 999999;
position: fixed;
right: 40px;
bottom: 40px;
display: flex;
align-items: center;
flex-direction: row;
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -88px;
background: #FFFFFF;
width: 78px;
height: 78px;
border: 4px solid #EEEEEE;
border-radius: 100%;
padding: 1px;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: show;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 1;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 500;
}
.at-about-fab__meta p {
color: #1a9228;
font-size: 24px;
font-weight: 300;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 700;
text-decoration: none;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna.
<div class="float">
</div>
<div class="dot"></div>
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="verkoper" src="https://d2tyltutevw8th.cloudfront.net/media/image/trump-round-1500174198.jpg" />
</div>
<div class="at-about-fab__meta">
<h2>Call us now!</h2>
<p>12345567890</p>
</div>
</div>
Hello #Rick float is the property of the class, not a class. Use following style.
.your_class_name
{
float: right; /* Left or right depends on your design */
}
I am creating a footer for my site and I wanted the footer to be fixed at the bottom. But when I scroll down, this won't go along with the document. It stays at the bottom of the page always. I have initialized the footer to position: absolute, and also added bottom: 0 of my CSS code. But it still stuck in the middle of the page. How can I resolve this everyone?
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer,
.lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
By the way, my footer has two different footers, the upper footer and the lower footer and both footers are inside a div called ".footer"
You need to add a position: relative; on a parent div or to the body tag wich I did. This will then position it to the bottom of the page becuase the body tag spans the entire document.
body {
position: relative;
}
.lorem {
line-height: 100px;
}
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer, .lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<body>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Risus nec feugiat in fermentum posuere urna nec tincidunt. Eleifend mi in nulla posuere sollicitudin. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Eget nunc scelerisque viverra mauris. Pretium aenean pharetra magna ac placerat vestibulum. Amet justo donec enim diam vulputate ut pharetra. Nisl tincidunt eget nullam non nisi est sit amet. Nunc lobortis mattis aliquam faucibus purus. Quisque egestas diam in arcu cursus euismod. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Vestibulum mattis ullamcorper velit sed.
Diam vel quam elementum pulvinar etiam. In metus vulputate eu scelerisque felis imperdiet. Mi eget mauris pharetra et ultrices. Pretium lectus quam id leo in. Diam phasellus vestibulum lorem sed risus ultricies tristique. Maecenas volutpat blandit aliquam etiam erat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Arcu cursus vitae congue mauris rhoncus. Malesuada nunc vel risus commodo. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim convallis aenean et tortor at. Faucibus in ornare quam viverra orci sagittis.
Vitae congue eu consequat ac. Id diam maecenas ultricies mi. Diam sollicitudin tempor id eu nisl nunc. In egestas erat imperdiet sed. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Dis parturient montes nascetur ridiculus mus mauris vitae. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus. Quis blandit turpis cursus in hac habitasse platea. Curabitur gravida arcu ac tortor dignissim convallis aenean. Iaculis nunc sed augue lacus viverra.
Quis eleifend quam adipiscing vitae proin sagittis. Nibh tortor id aliquet lectus proin nibh. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Aliquam faucibus purus in massa tempor nec feugiat. Magna ac placerat vestibulum lectus. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Viverra maecenas accumsan lacus vel facilisis volutpat est. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Sollicitudin tempor id eu nisl. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Id diam vel quam elementum pulvinar etiam non quam. Ultrices eros in cursus turpis. Pretium lectus quam id leo. Malesuada fames ac turpis egestas maecenas. Odio facilisis mauris sit amet massa vitae tortor. Amet porttitor eget dolor morbi non arcu risus.</div>
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
I think you set the footer property
position : fixed
left: 0;
bottom: 0;
width: 100%;
and maybe your problem will be solved.
If you want full-width footer at bottom of page try this
{
position : absolute
left: 0;
right : 0;
bottom: 0;
}
And you want the full-width footer to slide along the page
{
position : fixed
left: 0;
right : 0;
bottom: 0;
}
Happy coding
This is my fiddle of the issue: https://jsfiddle.net/oa2b4cr9/
#nav{
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img{
padding-bottom: 10px;
}
#pagecontent{
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
}
I'd like the two bars to fill the gap from the top to the bottom of the page. I've researched for the last couple of hours and it's driving me a bit mad! I've tried:
Adding display: table to the relevant elements
Setting the min/max/height for both of the columns to 100% and that just pushes the container through the footer.
Adding clear: both under both of the columns
Setting the overflow to hidden
Setting position to relative for the footer rather than absolute.
If anyone can help I would greatly appreciate it.
If you are trying to make an element positioned based on the browser viewport this is not a good use of float or flex. You are trying to achieve an absolute position.
header{background:red; position:absolute; left:0; top:0; right:0; height:100px;}
nav{background:green; position:absolute; left:0; top:100px; bottom:50px; width:150px;}
content{background:yellow; position:absolute; left:150px; top:100px; right:0; bottom:50px;}
footer{background:blue; position:absolute; left:0; right:0; bottom:0; height:50px;}
<header></header>
<nav></nav>
<content></content>
<footer></footer>
Declare a height property on the containing element #content, e.g:
#content{
/* additional */
height: 100%;
}
Then declare a height property on the nested #nav element, e.g:
#nav{
/* additional */
height: 100%;
}
Code Snippet Demonstration:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
height: 100%;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
height: 100%;
padding-bottom: 20px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px;
/* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
Updated JSFiddle
In addition:
The #footerbar element has been set to position: fixed
padding-bottom has been declared on the #pagecontent element to
account for the footer height taken out of the normal document
flow.
Alternatively:
1. flex-box alignment (check browser compatibility):
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
display: flex;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
padding-left: 15px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
2. absolute positioning:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
margin-left: 200px; /* offset sidebar nav width */
padding-left: 20px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
3. pseudo-elements:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
/* start additional */
#content:before {
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
max-width: 200px;
min-width: 200px;
background-color: #CBDDE6;
border-right: 1px solid black;
z-index: -1;
}
/* end additional */
#nav {
max-width: 200px;
min-width: 200px;
float: left;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
float: right;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
I've made a design with flex box. I've split my site in two parts. The left part has a width of 75% of the width of the window, the right side fill the rest.
The problem is now, when I place text into the right section, the text goes out of my screen. I've place a padding to the right side of that section but it must be 26.843.170 pixels (you read good) for to be good! To much of course... Note that the right side has a fixed position.
Now my question is, What I'm doing wrong? Here is my code:
$(".draw-area, .artist-info, .draw-en-info").css("height", parseInt($(window).height()) - parseInt($("fieldset").height()) + "px");
.option-list {
width: 100%;
height: 200px;
overflow-y: auto;
border: solid 1px #A9A9A9;
margin: 10px 0;
}
.artist-info {
background-color: lightgray;
margin: 0;
position: fixed;
top: 50px;
padding: 0 10px;
width: 25%;
/* padding-right: 26843170px; */
}
.option-item {
display: flex;
padding: 5px 10px;
transition: background-color 0.5s;
cursor: pointer;
}
.option-item:hover {
background-color: #1DD75F;
}
.form-control {
padding: 5px 5px;
}
#resultaatArtisten {
display: none;
}
fieldset {
background-color: white;
position: fixed;
width: 100%;
margin: 0;
border: 0;
padding: 0;
border-bottom: gray 2px solid;
}
fieldset > div {
padding: 10px;
}
.draw-en-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: absolute;
top: 47.9px;
width: 100%;
z-index: -1;
}
#draw-area {
width: 75%;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="container">
<fieldset>
<div>
<input type="text" class="form-control" placeholder="Zoek op artisten naam" id="zoekArtist" />
<div class="option-list" id="resultaatArtisten"></div>
<div>
</fieldset>
<div class="draw-en-info">
<section id="draw-area"></section>
<section class="artist-info">
<p>Top nummers</p>
<ul class="top-nummers">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, </li>
</ul>
</section>
</div>
</main>
I'm not entirely clear on what you are trying to do but flexbox can manage most of this.
If there are some requirements that you haven't mentioned you may need to ask a new question.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
.option-list {
width: 100%;
height: 200px;
overflow-y: auto;
border: solid 1px #A9A9A9;
margin: 10px 0;
}
.draw-en-info {
display: flex;
}
.draw-area {
background: plum;
flex: 1;
}
.artist-info {
background-color: lightgray;
padding: 0 10px;
flex: 0 0 25%;
}
.option-item {
display: flex;
padding: 5px 10px;
transition: background-color 0.5s;
cursor: pointer;
}
.option-item:hover {
background-color: #1DD75F;
}
.form-control {
padding: 5px 5px;
}
#resultaatArtisten {
display: none;
}
fieldset {
background-color: white;
//position: fixed;
width: 100%;
margin: 0;
border: 0;
padding: 0;
border-bottom: gray 2px solid;
}
fieldset > div {
padding: 10px;
}
<main class="container">
<fieldset>
<div>
<input type="text" class="form-control" placeholder="Zoek op artisten naam" id="zoekArtist" />
<div class="option-list" id="resultaatArtisten"></div>
<div>
</fieldset>
<div class="draw-en-info">
<section class="draw-area"></section>
<section class="artist-info">
<p>Top nummers</p>
<ul class="top-nummers">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod
non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce
varius, ligula non tempus aliquam,</li>
</ul>
</section>
</div>
</main>