Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 7 months ago.
Edit
Apparently my question is similar to a question about the margin width of a document's body. Which is kind of odd, because that question itself is the answer to mine. It's the answers here which refer to that question, and since I'm asking for those answers I can't know that. Hope this makes sense.
I have a webpage with fixed header and footer, for which I set the width to 100%. Nevertheless there is an 8 pixel gap to the left of both. How do I get rid of them?
CSS
#main {
width: 1200px;
height: 100%;
margin: 60px auto 0 auto;
padding: 1em;
}
/* pertaining header ------------------------------------ */
header, #main::before {
height: 60px;
}
header {
position: fixed;
top: 0;
width: 100%;
margin: auto;
background: linear-gradient(180deg, #91C1CC, #468795);
border-bottom: 1px solid black;
}
header div {
width: 1200px;
margin: 0 auto;
padding: 0;
}
header div p {
margin-top: 16px;
margin-left: 1000px;
font-family: Whitehall, Verdana, Geneva, sans-serif;
font-size: 2.5em;
color: white;
}
/* pertaining footer ------------------------------------ */
#container::after {
content: "";
display: block;
}
footer, #main::after {
height: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
margin: auto;
background: linear-gradient(0, #91C1CC, #468795);
border-top: 1px solid black;
}
footer div {
width: 1200px;
margin: auto;
padding: 1em;
}
#departments {
margin: 0;
padding: 0 1em;
margin-top: -8px;
margin-left: -22px;
font-size: 85%;
}
#departments a {
margin-right: 3em;
color: black;
}
#departments a:link, #departments a:visited {
text-decoration: none;
}
JSfiddle at https://jsfiddle.net/stevenvh/65dao4pt/5/
The 8 pixel gap is cause by the HTML body tag, it has a default margin of 8px on all the four sides.
To get ride of all the gap around the element, just use CSS property of margin: 0; like this,
body {
/* to remove gaps from four sides */
margin: 0;
}
Working Example:
#font-face {
font-family: Whitehall;
src: url('fonts/Whitehall.woff') format('woff'), url('fonts/Whitehall.ttf') format('truetype');
}
body {
font-family: Verdana, Geneva, sans-serif;
line-height: 1.6em;
/* to remove gaps from four sides */
margin: 0;
}
#main {
width: 1200px;
height: 100%;
margin: 60px auto 0 auto;
padding: 1em;
}
/* pertaining header ------------------------------------ */
header,
#main::before {
height: 60px;
}
header {
position: fixed;
top: 0;
width: 100%;
margin: auto;
background: linear-gradient(180deg, #91C1CC, #468795);
border-bottom: 1px solid black;
}
header div {
width: 1200px;
margin: 0 auto;
padding: 0;
}
header div p {
margin-top: 16px;
margin-left: 1000px;
font-family: Whitehall, Verdana, Geneva, sans-serif;
font-size: 2.5em;
color: white;
}
/* pertaining footer ------------------------------------ */
#container::after {
content: "";
display: block;
}
footer,
#main::after {
height: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
margin: auto;
background: linear-gradient(0, #91C1CC, #468795);
border-top: 1px solid black;
}
footer div {
width: 1200px;
margin: auto;
padding: 1em;
}
#departments {
margin: 0;
padding: 0 1em;
margin-top: -8px;
margin-left: -22px;
font-size: 85%;
}
#departments a {
margin-right: 3em;
color: black;
}
#departments a:link,
#departments a:visited {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header>
<div>
<p>Main title</p>
</div>
</header>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
</div>
<footer>
<div>
<p id="departments">
◼ About ◼ Contact ◼ Sitemap
</p>
</div>
</footer>
</div>
</body>
</html>
HTML's body tag has a margin on all sides set by default. By adding margin: 0 to your body you can fix that quite easily.
#font-face {
font-family: Whitehall;
src: url('fonts/Whitehall.woff') format('woff'),
url('fonts/Whitehall.ttf') format('truetype');
}
body {
font-family: Verdana, Geneva, sans-serif;
line-height: 1.6em;
margin: 0;
}
#main {
width: 1200px;
height: 100%;
margin: 60px auto 0 auto;
padding: 1em;
}
/* pertaining header ------------------------------------ */
header, #main::before {
height: 60px;
}
header {
position: fixed;
top: 0;
width: 100%;
margin: auto;
background: linear-gradient(180deg, #91C1CC, #468795);
border-bottom: 1px solid black;
}
header div {
width: 1200px;
margin: 0 auto;
padding: 0;
}
header div p {
margin-top: 16px;
margin-left: 1000px;
font-family: Whitehall, Verdana, Geneva, sans-serif;
font-size: 2.5em;
color: white;
}
/* pertaining footer ------------------------------------ */
#container::after {
content: "";
display: block;
}
footer, #main::after {
height: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
margin: auto;
background: linear-gradient(0, #91C1CC, #468795);
border-top: 1px solid black;
}
footer div {
width: 1200px;
margin: auto;
padding: 1em;
}
#departments {
margin: 0;
padding: 0 1em;
margin-top: -8px;
margin-left: -22px;
font-size: 85%;
}
#departments a {
margin-right: 3em;
color: black;
}
#departments a:link, #departments a:visited {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header>
<div>
<p>Main title</p>
</div>
</header>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
</p>
</div>
<footer>
<div>
<p id="departments">
◼ About
◼ Contact
◼ Sitemap
</p>
</div>
</footer>
</div>
</body>
</html>
As you've set the header as position: fixed; you could add left: 0; to the header and it will force it to the left. Then you don't need to set the width.
In a fixed-height container, I have a flexbox (.main) with flex-direction: row and flex-wrap: wrap. At a wide screen size, I'd like its children — an image (.image-column), and a long amount of text (.text-column) — to be columns, in which the image remains static and the text scrolls. So far, so good. When sized down past the columns' min widths, I'd like them to wrap and stack. This all works, but here's the problem: when they wrap and stack, the scrollable text is offset by the min-height of the .image-column above it, such that when you scroll down to the bottom of the text, the scrollbar disappears offscreen rather than remaining within its container. But if you adjust the height to account for this offset, the .text-column is squished in the unwrapped state.
The two conflicting elements seem to be:
.image-column's min-height: 200px — but without this, the image doesn't show up at all when wrapped
.text-column's height: 100% — but without this, the text doesn't scroll
I've tried .text-column with height: calc(100% - 200px) — this fixes the offset when stacked, but creates unnecessary whitespace when in columns, and I'd prefer to avoid such specificity anyway
I'd like to figure out a solution with CSS only and no media queries, since this container may be in a multi-column layout with other containers. I'm willing to use flex, grid, float, or any other arcane layout trick.
Has anyone else experienced this issue with flex row wrapping and scrolling?
(You can run the code snippet below to see the layout wrapped, and press Full Page to see the layout in its wide 2-column state.)
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
padding: 40px;
background: #f6f6f6;
font-family: sans-serif; font-size: 120%; line-height: 1.5; color: #111;
}
.container {
height: 600px;
min-width: 300px;
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 10px;
overflow: hidden; /* don't scroll */
border: 1px solid #ccc;
}
.header {
border-bottom: 1px solid #ccc;
padding: 20px;
}
.main {
flex: 1 1 auto; /* fills remainder of height */
display: flex;
flex-direction: row;
flex-wrap: wrap; /* wrap after elements reach min-width / flex-basis */
overflow: hidden; /* don't scroll */
}
.image-column {
min-height: 200px;
flex: 1 1 300px; /* column width, min for wrapping */
background-image: url('https://images.unsplash.com/photo-1641361784653-73767ccfdf60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDM0fDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-column {
height: 100%;
flex: 2 1 420px; /* column width, min for wrapping */
overflow: auto; /* scroll */
padding: 20px;
}
.footer {
border-top: 1px solid #ccc;
padding: 20px;
}
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="image-column"></div>
<div class="text-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros.</p>
</div>
</div>
<div class="footer">Footer</div>
</div>
I've found a solution to my own question.
Grid has a similar way of wrapping columns, using repeat's auto-fit with a minmax for each column in which the min is a fixed width.
.main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
overflow: hidden; /* don't scroll */
}
Using this approach, when the columns wrap, the first column's min-height no longer offsets the second column and its scrollbar out of the container, as it did with flex row wrap.
The only small drawback is that the grid's two columns must be of equal width in order for the wrapping to work. For my uses, this is acceptable.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
padding: 40px;
background: #f6f6f6;
font-family: sans-serif; font-size: 120%; line-height: 1.5; color: #111;
}
.container {
height: 600px;
min-width: 300px;
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 10px;
overflow: hidden; /* don't scroll */
border: 1px solid #ccc;
}
.header {
border-bottom: 1px solid #ccc;
padding: 20px;
}
.main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
overflow: hidden; /* don't scroll */
}
.image-column {
min-height: 200px;
background-image: url('https://images.unsplash.com/photo-1641361784653-73767ccfdf60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDM0fDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-column {
overflow: auto; /* scroll */
padding: 20px;
}
.footer {
border-top: 1px solid #ccc;
padding: 20px;
}
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="image-column"></div>
<div class="text-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros.</p>
</div>
</div>
<div class="footer">Footer</div>
</div>
(You can run the code snippet below to see the layout wrapped, and press Full Page to see the layout in its wide 2-column state.)
try setting the height of .text-column to 260px
.text-column {
height: 260px;
flex: 2 1 420px; /* column width, min for wrapping */
overflow: auto; /* don't scroll */
}
I would be grateful for advice about how to rotate a button in a flex context. I have a flex container with a "row" direction (that is, the three content items are arranged from left to right in a row), and the leftmost content item is a <div> that contains just a <button> with a few words of text in it. I want that <div> to be rendered vertically (so that the text reads from bottom to top), to hug the left edge of the container, and to be just the width of its one line of text.
The sample at https://jsfiddle.net/djbpitt/gth3nck9/74/ works as I need it to in Firefox 89, but in Chrome 90 (and Safari 14.1.1) the button is not rotated. caniuse.com tells me that vendor prefixes should not be required for CSS transform: rotate() or writing-mode: vertical-lr;, and adding a -webkit prefix doesn't seem to help anyway.
I would be grateful if someone could please advise me about how I can obtain the behavior I need in the versions of Firefox, Chrome, and Safari mentioned above (which are the latest versions as I write this). I would prefer a pure HTML/CSS (that is, no JavaScript) solution. Thank you!
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div id="button">
<button><span>Rotate me!</span></button>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor. Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
</body>
</html>
The problem seems to lie with Chrome/Edge settings for button. They have for example amongst other things:
-webkit-writing-mode: horizontal-tb !important;
So this snippet gives up trying to style a button and replaces it with a div. Obviously you'll want to style that as you wish:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body>* {
overflow-y: auto;
height: 100vh;
}
div#button {
position: relative;
display: flex;
flex: 0 0 1em;
writing-mode: vertical-lr;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
#button div {
background-color: #eeeeee;
padding: 10px 5px 10px 5px;
border: 1px solid black;
border-radius: 5px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<div id="button">
<div>Rotate me!</div>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus
laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor
scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et
orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus
at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam
ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet
ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas
convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus
justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor.
Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
OP here. Thank you, A Haworth, for the pointer to the !important user agent setting for writing-mode in Webkit. I knew that browsers had default styling, of course, but I didn't realize that some of that styling apparently could not be overridden with user specifications.
Your insight led me to give up on changing the writing-mode value for the <button>, as you suggest, and I approached the task by wrapping a <span> around the text inside my <button> and specifying the writing-mode for the <span>. The new version is at https://jsfiddle.net/djbpitt/gth3nck9/86/. HTML and CSS are copied below:
<div id="button">
<button>
<span>Rotate me!</span>
</button>
</div>
I had to do some additional fiddling with the CSS to get the rendering I wanted:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
Currently stuck on how to align the textbox and button on the same line with 50% width (in footer), can anyone give me some sort or guide or able to fix this issue for me?
[Extra questions, any further support or guidance would be appreciated, Wireframe given for basic idea]
One being how to put spacing between the text and picture that are aligned below the navbar.
Below that, how to put a thin border for each separate picture and box of text.
(Sorry if i'm not allowed to ask extra questions)
You could use css flexbox to achieve the
"align the textbox and button on the same line with 50% width"
part Specifically, add
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
to your css file. I included the modified project below so that you could check the effect. More about CSS flexbox at here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>
As of adding space between image and text, you could simply apply a margin or some padding to the image. Something like this will do:
.desired-img {
margin: 5px;
}
To add border to a paragraph, simply use css to style your border. Something like this will do the job:
.column {
border: 1px solid lightgrey;
}
Hope this helps!
You need to remove the button from it's own div block element and put inline with the input. I've set the .container div to 50% and centered aligned the input and button. To add space between your image and text, just and a margin to the right and bottom. And you can simple add a border attribute to your .column class to give a thin border:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#holidayImg {
margin: 0px 20px 20px 0px;
}
.paragraph {
padding: 5px;
}
{
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
border: solid 1px #ccc;
margin: 0px 5px;
border-radius 4px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
}
input[type=text] {
padding: 15px;
margin: 5px;
display: inline-block;
border: none;
background: #f1f1f1;
width: 50%;
}
.signupbtn {
width: 50%;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</form>
</body>
</html>
If I understand what you're asking, you can add another class as follows:
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required class="side-by-side">
<div class="clearfix side-by-side">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
// CSS added to get effect
.container {
width: 100%;
float: right;
}
.side-by-side {
display: inline;
}
This way it stays on 1 line and stays on the right side similar to your wireframe.
I'm trying to make the text of this parallax effect NOT to scroll down at the same as the effect.
I believe it has something to do with the html CSS code(overflow), I've tried putting into different places but it did not work. Is there any way to make my parallax work as it is now and while you scroll down the text will still be fully visible? Cause as soon as you scroll down the parallax AND the text scroll as well but by the time you reach the text, some have already scrolled up.
html {
height: 100%;
overflow: hidden;
}
body {
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding: 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header:before {
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url('../img/lake.jpg');
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
p {
color: grey;
}
.container {
max-width: 95%;
margin: 0 auto;
display: block;
}
<header>
<h1>Parallax Effect</h1>
<p>Pure CSS // No JavaScript!</p>
</header>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
</div>
Your container class needs to be positioned relative to its parent for it to show up in front of the parallax background.
.container {
max-width: 95%;
margin: 0 auto;
display: block;
position: relative;
}
You'll need to add some background color to separate it visually as well.
Here's a Codepen demo with a similar effect and its accompanying article.