I have applied position: sticky to an articles header element but it isn't working.
header {
width: 25%;
float: left;
top: 0;
position: sticky;
}
The codepen is here http://codepen.io/cssgrid/pen/7a86f94c7d581f913c43a0c7b512ddb0?editors=1100
It's because the floated elements in .thousand aren't cleared, .thousand's height is 0 (aside from it's margin). So header has nothing to be sticky to.
I made the content of .thousand inline-block so that you don't have to clear the floats, and that seems to work.
* {
box-sizing: border-box;
}
.hero_img {
height: 50vh;
width: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.thousand {
max-width: 1000px;
margin: 0 auto;
clear: both;
margin-top: 2.5em;
padding-top: 2.5em;
}
header {
width: 25%;
display: inline-block;
top: 0;
position: sticky;
vertical-align: top;
}
p {
width: 75%;
display: inline-block;
}
<div class="hero_img"></div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
Alternatively, you can give height to .thousand by removing the float from the p element inside of it (the taller element) and just floating header (the shorter element)
* {
box-sizing: border-box;
}
.hero_img {
height: 50vh;
width: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.thousand {
max-width: 1000px;
margin: 0 auto;
clear: both;
margin-top: 2.5em;
padding-top: 2.5em;
}
header {
width: 25%;
float: left;
top: 0;
position: sticky;
}
p {
width: 75%;
display: inline-block;
}
<div class="hero_img"></div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
Related
In this example, I'm trying to use flex-flow: column wrap in tablet media query, to let Section Three fall under Section Two and Section Four fall under Section Three... I'm not sure what I'm doing wrong? Instead, there's a large gap under Section Two.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100vh;
}
body {
background-color: lightblue;
font-family: 'Roboto', sans-serif;
font-size: 16px;
position: relative;
padding-bottom: 50px;
}
ul {
padding: 0;
}
ul li {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
main {
padding-left: 16px;
padding-right: 16px;
display: flex;
flex-flow: column wrap;
}
#media screen and (min-width: 768px) {
main {
flex-flow: row wrap;
height: 10000px;
}
}
section {
margin: 24px 0;
}
#media screen and (min-width: 768px) {
section {
flex: 50%;
padding-left: 16px;
padding-right: 16px;
}
}
article p {
margin: 16px 0;
}
<main>
<section>
<h2>Section One</h2>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi nisi earum cupiditate error animi nesciunt quas, a possimus enim dignissimos deleniti autem non reiciendis assumenda culpa dolores quis nulla eveniet.</p>
<p>Veritatis at tenetur explicabo reprehenderit adipisci, nisi alias, dolores illum quibusdam fugiat dolorem corrupti facilis aspernatur quae cum odit eveniet, neque quisquam quam suscipit iste. Amet provident cum id quasi!</p>
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" alt="">
<p>Nihil quibusdam provident optio unde eaque asperiores est veritatis repudiandae officia distinctio deleniti fuga facere modi ipsam autem cum deserunt, facilis quia accusantium labore illum possimus corporis! Fugiat, mollitia vitae.</p>
</article>
</section>
<section>
<h2>Section Two</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias eaque, impedit sint nobis dolore non porro accusantium ullam quas eligendi sequi suscipit nemo cumque quisquam ipsa harum nam beatae nesciunt!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
</article>
</section>
<section>
<h2>Section Three</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias eaque, impedit sint nobis dolore non porro accusantium ullam quas eligendi sequi suscipit nemo cumque quisquam ipsa harum nam beatae nesciunt!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
</article>
</section>
<section>
<h2>Section Four</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias eaque, impedit sint nobis dolore non porro accusantium ullam quas eligendi sequi suscipit nemo cumque quisquam ipsa harum nam beatae nesciunt!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
</article>
</section>
</main>
I would like to show every part of the sculpture. I'm trying to add a Parallax effect on the page.
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 1.8em;
color: #666;
}
.fox {
background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
min-height: 100%;
background-size: cover;
position: relative;
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
<body>
<div class="fox">
<div class="text-fox">
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
Use background-size:auto 100%
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 1.8em;
color: #666;
}
.fox {
background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
min-height: 100%;
background-size: auto 100%;
position: relative;
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
<body>
<div class="fox">
<div class="text-fox">
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
or contain
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 1.8em;
color: #666;
}
.fox {
background-image: url('https://images.squarespace-cdn.com/content/v1/533b3eaae4b0ac273368560e/1593808903170-L72NFRC5HVJ7ZV4YPSKN/ke17ZwdGBToddI8pDm48kHUZU1VQuKQ0i9seXnqxeZ17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u97MBNGrB-WlK2RJDlX919z6LRrKc4j6gnP5EoAvI0pyA/scu_010_Untitled%28Fox%29.jpg?format=1000w');
min-height: 100%;
background-size: contain;
position: relative;
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
<body>
<div class="fox">
<div class="text-fox">
</div>
</div>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
<section class="section section-light">
<h2>Section one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus corporis, porro amet animi incidunt id provident deserunt fuga iure soluta sed quisquam molestiae quae ea, doloribus, ut distinctio, voluptates. Aut molestiae magnam, rerum quos deleniti
laboriosam, autem natus nulla ab at dolores. Ullam molestias et libero excepturi ratione, amet itaque aliquid aut architecto dolores unde, vitae porro voluptatem laudantium reiciendis nostrum maiores nesciunt neque beatae. Adipisci amet consectetur,
sed nam totam omnis, dignissimos ipsam dolorum, odit pariatur eaque aliquid veniam saepe numquam molestiae! Fuga asperiores, omnis, esse distinctio laborum nisi exercitationem incidunt nostrum, suscipit nesciunt pariatur ullam corporis, reprehenderit
mollitia.
</p>
</section>
https://redstapler.co/css-parallax-scrolling-effect/
found this that does pretty much what your asking to do?
you can simply change height like that
.parallax-wrapper {
width: 100vw;
height:100vh;
I have container which separate its content by 2 columns. Is it possible to fill remain height in child section so next section could start with next column? Or some another approach with same result.
jsfiddle
.container {
height: 150px;
width: 300px;
background: #0ff;
margin-top: 10px;
overflow-x: scroll;
column-count: 2;
column-gap: 10px;
padding: 5px;
}
.section:nth-child(odd) {
background: rgb(91, 238, 116);
}
.section:nth-child(even) {
background: rgb(182, 182, 212);
}
<div class="container">
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
</div>
Simply add some margin. Make it the same as the height to make sure it will always work
.container {
height: 150px;
width: 300px;
background: #0ff;
margin-top: 10px;
overflow-x: scroll;
column-count: 2;
column-gap: 10px;
padding: 5px;
}
.section:nth-child(odd) {
background: rgb(91, 238, 116);
}
.section:nth-child(even) {
background: rgb(182, 182, 212);
}
.section:not(:last-child) {
margin-bottom:150px;
}
<div class="container">
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
</div>
When the following CSS property is added to an image, the image still occupies the same space that it did when it was sized at 100%? Is there a way to make the text fill the space around this image?
transform: scale(0.2);
height: auto;
float: right;
That's not how transform works as I understand it. It only changes the appearance visually; the actual dimensions of the original object are maintained.
You would have to adjust the width/height of the image rather than use transform.
Demo in jsFiddle & StackSnippets:
div {
background: #bae5fc;
overflow: hidden;
margin-bottom: 25px;
width: 40%;
float: left;
margin: 2%;
padding: 4px;
}
img {
float: right;
display: block;
transition: all 0.5s ease;
max-width: 50%;
}
.trans:hover img {
transform: scale(0.5);
}
.dimen:hover img {
max-width: 25%;
}
<div class="trans">
<img src="https://picsum.photos/400/200" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
</p>
</div>
<div class="dimen">
<img src="https://picsum.photos/400/200" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
</p>
</div>
Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?
Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.
https://jsfiddle.net/0cx30dqf/
If you're willing to jump into the HTML5 future, you can use flexbox...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Try this!
Uses Flex!
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
Note: Does not work with IE 9 & Below
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom
HTML:
<div class=”main-container”>
<header>
this is a header
</header>
<section>
this is content
</section>
<footer>
this is a footer
</footer>
</div>
CSS:
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
CoffeeScript:
footerEventListener = ->
$(window).on "resize", ->
setFooterHeight()
setFooterHeight = ->
// get footer height in px
bottomPadding = $("footer").css("height")
$(".main-wrapper").css("padding-bottom", "#{bottomPadding}")
// init footer events
setFooterHeight()
footerEventListener()
Check out the CodePen here.
since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it
jquery:
if( $(document).height() < $(window).height() )
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
html structure:
<div id="content"></div>
<div id="footer"></div>
I think the best way is just add a class to your footer. Javascript will do the rest.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$( "section" ).last().css({
"margin-bottom": footerHeight + 'px'
});
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By Mohammad Abdus Salam
</p>
</div>
</div>
</footer>
Take a look at this, cssstickyfooter, it works great in any browser.
Update: This is from 2010, might not be relevant with current standards