I need some help with my css code.
I'm using css grid.
I have 2 columns.
How to add a top offset for the right column?
That is result that I want to get:
.parent {
background-color:#ddd;
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.child {
background-color:#aaa;
padding:15px;
}
<div class="parent">
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, </p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
</div>
There is just a dummy text because stackoverflow thinks there is not enough details for submit my question.
You can use top: 20px for the even child element. (Remember to set position: relative to child element)
.parent {
background-color: #ddd;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
padding-bottom: 20px;
}
.child {
background-color: #aaa;
padding: 15px;
}
.child:nth-of-type(even) {
top: 20px;
position: relative;
}
<div class="parent">
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, </p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci
vel culpa quibusdam, iure expedita nam doloribus? in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
<div class="child">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum provident adipisci, voluptates aliquam corporis magnam. Dolor aliquam reprehenderit molestiae in quam quae adipisci vel culpa quibusdam, iure expedita nam doloribus?</p>
</div>
</div>
Related
I am using flexbox and I get the following problem.
Although the text is the same, each div is in line differently. I would like them to stay on the same line each element occupying the same size.
I can have n amount of divs so I shouldn't use percentages.
How can I do it?
<ul class="flex-container wrap">
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita
excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni
quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita
excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut,
magni quis cumque earum at laborum, consectetur voluptas.</li>
</ul>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
height: 100px;
margin: 10px;
}
https://jsfiddle.net/4n86tqg3/1/
Remove height and reset flex property via flex:1; or flex:1 1 auto;, It will wrap when all width of children have reach their min-content width .
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: flex;
}
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
min-height: 100px;
flex: 1;
margin: 10px;
}
ul+ul .flex-item {
flex: 1 1 0
}
<ul class="flex-container wrap">
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
</ul>
<ul class="flex-container wrap">
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
</ul>
<p>if we are so many or width so small, some of us will wrap</p>
<ul class="flex-container wrap">
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
<li class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</li>
</ul>
If you want items to stay aligned, just remove the following rule set from your CSS:
.wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
More about flex-wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
I know that direct children of a grid item cannot be floated. I'm trying to create an article layout where something like this is achieved: pull an image to either side, and have the text flow around it.
Here's what I have so far on Codepen. With named template columns, I can have an image fill up only part of the width of the grid, but is there any way to let the surrounding text flow around it?
Hopefully my Codepen example makes sense; please let me know if I can provide additional information or clarification!
figure {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
article {
max-width: 800px;
margin: auto;
display: grid;
grid-template-columns: [wide-start] minmax(1em, 1fr) [main-start] minmax(0, 16em) [main-half] minmax(0, 16em) [main-end] minmax(1em, 1fr) [wide-end];
}
article>* {
grid-column: main;
}
figure {
grid-column: wide-start / main-half;
}
div {
grid-column: main-half / main-end;
padding-left: 1em;
}
<article>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore dolorem porro vero! In iste nemo repellendus? Doloremque eius officia beatae doloribus autem vitae enim qui. Minus, facere? Quaerat, laboriosam enim?</p>
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>I wish the text could wrap around to my right</p>
</figcaption>
</figure>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, obcaecati, blanditiis ad nostrum autem atque error quasi, tempora debitis exercitationem illum. Maiores cum delectus, fugit repellat provident libero hic magni?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur aspernatur est numquam alias consequatur praesentium quaerat totam dicta non asperiores similique inventore, a perspiciatis perferendis laudantium minus ratione animi!</p>
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>Text is now in a column next to me (because I wrapped it in a <code><div></code>, but it won't wrap underneath me automatically</p>
</figcaption>
</figure>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat repellat consequatur, voluptas sint eum ea error sit hic dignissimos expedita totam suscipit officia consequuntur non, quaerat odio. Recusandae, consequatur maxime!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque eveniet, pariatur ipsa fuga hic nihil unde maiores, provident eius minima atque accusamus voluptate aspernatur perferendis. Ab rem inventore omnis at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At vitae ex fugit sequi, natus asperiores? Laudantium optio, doloribus error dolores exercitationem aliquid esse, reiciendis mollitia alias vel illo, amet officiis?</p>
</div>
</article>
If I understood you correctly and you don't have to use only CSS Gird for the whole layout you can wrap your figure and paragraphs in another div, then trough that div give your figure max width of 50%, float:left, and some margin-right... you get the point.
figure { margin: 0; }
img { max-width: 100%; height: auto; }
article {
max-width: 800px;
margin: auto;
display: grid;
grid-template-columns:
[wide-start] minmax(1em, 1fr)
[main-start] minmax(0, 16em)
[main-half] minmax(0, 16em) [main-end]
minmax(1em, 1fr) [wide-end];
}
article > * {
grid-column: main;
}
.floating{
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.floating figure {
float:left;
max-width: 50%;
margin-right: 20px;
}
.floating p {
margin-top:0;
}
<article>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore dolorem porro vero! In iste nemo repellendus? Doloremque eius officia beatae doloribus autem vitae enim qui. Minus, facere? Quaerat, laboriosam enim?</p>
<div class="floating">
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>I wish the text could wrap around to my right</p>
</figcaption>
</figure>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, obcaecati, blanditiis ad nostrum autem atque error quasi, tempora debitis exercitationem illum. Maiores cum delectus, fugit repellat provident libero hic magni?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur aspernatur est numquam alias consequatur praesentium quaerat totam dicta non asperiores similique inventore, a perspiciatis perferendis laudantium minus ratione animi!</p>
</div>
<div class="floating">
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>Text is now in a column next to me (because I wrapped it in a <code><div></code>, but it won't wrap underneath me automatically</p>
</figcaption>
</figure>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat repellat consequatur, voluptas sint eum ea error sit hic dignissimos expedita totam suscipit officia consequuntur non, quaerat odio. Recusandae, consequatur maxime!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque eveniet, pariatur ipsa fuga hic nihil unde maiores, provident eius minima atque accusamus voluptate aspernatur perferendis. Ab rem inventore omnis at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At vitae ex fugit sequi, natus asperiores? Laudantium optio, doloribus error dolores exercitationem aliquid esse, reiciendis mollitia alias vel illo, amet officiis?</p>
</div>
</div>
</article>
I need a create 4 cards with non-changable height with buttons on the bottom, but there are different text amount in each card.
Position Fixed is connected to body element,
position absolute scrolls with content,
position sticky appears when content ends.
https://codepen.io/anatoli101/pen/NVzbGY Here is a basic exemple of my problem
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
background-color: red;
height: 400px;
width: 300px;
overflow-y: auto;
}
.button{
position:sticky;
bottom:0;
background-color: grey;
width: 100%;
height: 30px;
}
You'll get a much nicer result (no occluded scrollbars) using flex:
.content {
display: flex;
justify-content: space-evenly;
height: 400px;
}
.container {
display: flex;
flex-direction: column;
flex: 0 1 250px;
margin: 0 5px;
}
.fixed-div {
background-color: red;
overflow-y: auto;
flex: 1 1 auto;
}
.button {
background-color: grey;
flex: 0 0 30px;
}
<h1>I need grey area fixed on the bottom, not dependent on text amount</h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est </p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
</div>
A good way to achieve this is by wrapping the element with the class fixed-div inside a container, and moving the element with the class button outside of the element with the class fixed-div, so that it is the direct child of the container element. Then you can set position: relative to the container element, and position: absolute to the element with the class button. As the container element will have the exact same size (and especially the same height) as the element with the class fixed-div, the element with the class button will be positioned at its bottom.
You also will need to add a bottom padding to the element with the class fixed-div so that the button doesn't not hide its content, and so that it doesn't affect its defined height, you can set its box-sizing property to border-box.
See the following code:
.content {
display: flex;
width: 100%;
justify-content: space-around;
}
.container {
position: relative;
}
.fixed-div {
box-sizing: border-box;
width: 150px;
height: 400px;
padding-bottom: 30px;
overflow-y: auto;
background-color: red;
}
.button {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: grey;
}
<h1>I need grey area fixed on the bottom, non depending of text amount </h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum.</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae? </p>
</div>
<div class="button"></div>
</div>
</div>
I reduced the width of the text elements so that it works within a narrow container, you can run the code in full page if it is still too narrow.
Leaving the button inside the scrolling element and setting position: relative to the latter and position: absolute to the former wouldn't work as the bottom of the button would be positioned inside the scrolling element at 400px which is the height of the scrolling element, and would scroll with its content.
Hope that helps.
You can try code:
.fixed-div p{
display: block;
margin: 0;
padding: 10px;
height: 350px;
}
This is a demo: https://codepen.io/phuongnm153/pen/zQaobq
use position: relative; for the parent (fixed-div) and position:absolute;bottom:0; for the child (button)
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
position: relative;
background-color: green;
height: 400px;
width: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.button{
position:relative;
background-color: grey;
width: 100%;
height: 30px;
display: inline-table;
}
I have a div which is position absolute causing the proceeding content to sit over it which is understandable, I was wondering how I can have the div remain as position: absolute but have the content continuing as if the div was still in the document flow? Would this call for a padding bottom trick on the absolute content?
HTML
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet provident aperiam consequuntur veniam repellendus eaque repudiandae, modi architecto aut fugit esse nostrum quidem quo molestiae quasi! Sed facilis, molestias perspiciatis.</p>
<div class="absolute">
<h2>Position absolute content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio hic quidem vero tenetur ad mollitia voluptas libero, voluptates dolore quasi doloremque id cum! Facilis qui similique facere commodi quisquam.</p>
</div>
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas non dolor facilis natus nam. Voluptas commodi illum aut quasi voluptatibus cupiditate doloribus at officia voluptates. Reiciendis placeat delectus repellendus.</p>
</div>
</div>
CSS
.absolute {
position: absolute;
}
JsFiddle: https://jsfiddle.net/mz41jzqd/
function updateTopMargin(){
var abs = $('.absolute').eq(0);
abs.next().css({'margin-top':abs.outerHeight()+'px'});
}
$(window).on('load resize', updateTopMargin);
$('.absolute').on('resize', updateTopMargin);
.absolute {
position: absolute;
}
.absolute + * {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet provident aperiam consequuntur veniam repellendus eaque repudiandae, modi architecto aut fugit esse nostrum quidem quo molestiae quasi! Sed facilis, molestias perspiciatis.</p>
<div class="absolute">
<h2>Position absolute content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio hic quidem vero tenetur ad mollitia voluptas libero, voluptates dolore quasi doloremque id cum! Facilis qui similique facere commodi quisquam.</p>
</div>
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas non dolor facilis natus nam. Voluptas commodi illum aut quasi voluptatibus cupiditate doloribus at officia voluptates. Reiciendis placeat delectus repellendus.</p>
</div>
</div>
I hope this question makes sense. I'm stummped at what to do. I am currently developing a site where a section of the page will have two seperate background colors (1 for the left and 1 for the right). This is what I am trying to go for:
<div class="gray-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="white-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
I've tried several varations of this, putting rows under the span, putting containers and subrows in the span, but I'm not able to create the affect I want. Can anyone please help out? Thanks!
Update: Heres a JSFiddle of what I am trying to do. It works, but its not in a container to space out the row correctly. When I put it in the container, The blue on the left does not extend all the way.
http://jsfiddle.net/BVmUL/622/
try the following: Bootply demo
<div class="container">
<div class="row">
<div class="span6">
<div class="gray-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="span6">
<div class="white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
</div>
</div>
css:
.gray-bg {
background-color:red;
}
.white-bg {
background-color:green;
}