I have this css and its working fine the text appears at right and is aligned.
However the same code of that fiddle in a pdf, the text is apeparing like this (like the example at right, at left is how it should display):
Do you know what can be the issue?
.container {
display: flex;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
You can solve this problem by using text-align
.container {
display: flex;
text-align: justify;
text-justify: inter-word;
}
.span {
margin-right: 5px;
}
<div class="container">
<span class="span">1.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vel aut quidem consequatur quaerat optio ab! Iste fugit nostrum odio dolorum sequi, odit ratione omnis, atque sunt perferendis commodi, iure.</span>
</div>
#mehran text-justify:inter-word; is not a valid CSS property
Related
I am working in a Nuxt app and using CSS based smooth scrolling to anchor links. The smooth scroll itself works but the scroll-margin property is achieving nothing... it is seemingly completely ignored. The exact same code works fine outside of the Nuxt app so I wonder whether it is something to do with Nuxt.
Slimmed down version of the code is as follows and I have also created a (working) non-Nuxt codepen to show the code in action outside of Nuxt.
For the sake of clarity, I want to use CSS only to achieve smooth scrolling with a scroll margin in Nuxt. I do not want to use JavaScript or built in Vue / Nuxt features. If I have to I will but, at the very least, I'd like to know why scroll-margin is not doing anything.
HTML
<main>
<header>Fixed header</header>
<section>Click this link to scroll to a section further down the page and show the targeted state. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section id="scroll-section"> <strong class="show-on-target">Check out the space between this block and the header 👆 The block is clear of the header thanks to the <code>scroll-margin</code> property. The block was blue before you clicked the link and this text wasn't here either.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
</main>
SCSS
* {
box-sizing: border-box;
font-family: helvetica;
margin-inline: 0;
line-height:1.5;
}
html {
scroll-behavior: smooth;
}
header {
position: fixed;
display: grid;
place-content: center;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 3rem;
background: #ed6a5a;
font-size: 1.5rem;
}
section {
background: #9bc1bc;
padding: 50px 30px;
&:nth-child(2n) {
background: #f4f1bb;
}
&:first-of-type {
padding-block-start: 20vh;
}
}
strong {
font-size: 1.2em;
}
code {
font-family: monospace;
}
:target {
scroll-margin: 5rem;
background: #F2D7EE;
.show-on-target {
display: block;
margin-block-end: 20px;
}
}
.show-on-target {
display: none;
}
What I tried:
Using the code above to create a CSS-only smooth-scroll including a scroll-margin. I also tried tweaking the code above to use section, [id], section[id] and #myAnchor in place of :target but to no avail.
What I was expecting:
Page to scroll smoothly to the anchor leaving a 5 rem margin above it.
What actually happens:
Page scrolls smoothly to the anchor but with no margin above it
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to vertically content within a div with flexbox, so that it always remains centered.
However it is not working as expected. Interested to see where I'm going wrong.
Just to confirm, the 'left div' should display the contents in regular vertical order, not horizontally as is currently happening.
section {
display:flex;
}
div {
padding:12px;
width:400px;
height:300px;
display:flex;
align-items:center;
}
.left {background:#bada55}
.right {background:red}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
Link to codepen
You can use flex-direction on .left to make it center vertically:
section {
display: flex;
}
div {
padding: 12px;
width: 400px;
height: 300px;
display: flex;
}
.left {
background: #bada55;
flex-direction: column;
justify-content: center;
}
.right {
background: red;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
EDIT based on your comment, I believe this works:
section {
display: flex;
align-items: center;
height: 300px;
}
div {
width: 400px;
padding: 12px;
}
div.right {
display: flex;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
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>
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
.content {
width: 200px;
height: 150px;
padding: 20px;
background: yellow;
overflow: scroll;
box-sizing: border-box;
}
http://jsfiddle.net/v6yjLdnp/
Why doesn't the padding-bottom work in this case when scrolling? And how do I make this possible?
I suppose you mean the padding at the bottom of the scrolled content. This seems to be a browser issue - see the comments. But with the following code it should work properly in all browsers.
Transfer some of the settings to the container, then it works as desired:
body {
margin: 0;
}
.container {
width: 200px;
height: 150px;
overflow: scroll;
}
.content {
padding: 20px;
background: yellow;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>
The problem is probably be caused by the scroll bars.
This is a workaround with using pseudo elements in css, but it might solve your problem:
.content::after { content: ''; display: block; width: 100%; height: 20px; }
EDIT: Remove the padding bottom of the content element to make it work in all browsers:
.content { padding-bottom: 0px; }
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;
}