I'm creating a grid of tourist attractions for a fullstack application that im working on. An issue that im struggling with is that I created a row of 3 images with a text box on each image and the text box wont align vertically in the center. When i stretch the page, the text box begins to strech and is not aligned in the center vertically anymore. How can i fix this issue?
.more-rec-text h1{
text-align: center;
font: 50px;
margin-bottom: 50px;
}
#image-recc{
height: 300px;
width: 500px;
}
.container-recc{
display: flex;
justify-content: space-evenly;
align-items: center;
margin-right: 50px;
margin-left: 50px;
padding: 25px;
}
.text-recc h1{
font-size: 30px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.text-recc p{
font-size: 15px;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
<section class="more-reccomendations">
<div class="more-rec-text">
<h1>More Reccomendations</h1>
</div>
<div class="container-recc">
<div class="item">
<img id="image-recc" src="Images/614377a3561cd7fb26a377ca_lumen-field-aerial.jpg">
<div class="text-recc">
<h1>Sporting Events</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/Visit-Rainier-.jpg">
<div class="text-recc">
<h1>Hiking Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/c67b4ab0-50ea-41c9-8e1b-6eb79446b9c0_1920x1080.jpg">
<div class="text-recc">
<h1>Food Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
<div class="container-recc">
<div class="item">
<img id="image-recc" src="Images/hero_chiihuly_03.jpg">
<div class="text-recc">
<h1>Museums</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/af998bbb-4f31-4597-928c-d9bd0b52b181_1920x1080.jpg">
<div class="text-recc">
<h1>Outdoor Activities</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/57d430adfd8663a061e26c677ac9298e.jpg">
<div class="text-recc">
<h1>Top Attractions</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
</section>
That's because the image has a the specific width (not the container of both image and text). If you only need to make them aligned center, you could just make the image become centered by adding margin: 0 auto and display: block to the #image-recc like this:
.more-rec-text h1{
text-align: center;
font: 50px;
margin-bottom: 50px;
}
#image-recc{
height: 300px;
width: 500px;
margin: 0 auto;
display: block;
}
.container-recc{
display: flex;
justify-content: space-evenly;
align-items: center;
margin-right: 50px;
margin-left: 50px;
padding: 25px;
}
.text-recc h1{
font-size: 30px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.text-recc p{
font-size: 15px;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
<section class="more-reccomendations">
<div class="more-rec-text">
<h1>More Reccomendations</h1>
</div>
<div class="container-recc">
<div class="item">
<img id="image-recc" src="Images/614377a3561cd7fb26a377ca_lumen-field-aerial.jpg">
<div class="text-recc">
<h1>Sporting Events</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/Visit-Rainier-.jpg">
<div class="text-recc">
<h1>Hiking Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/c67b4ab0-50ea-41c9-8e1b-6eb79446b9c0_1920x1080.jpg">
<div class="text-recc">
<h1>Food Reccomendations</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
<div class="container-recc">
<div class="item">
<img id="image-recc" src="Images/hero_chiihuly_03.jpg">
<div class="text-recc">
<h1>Museums</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/af998bbb-4f31-4597-928c-d9bd0b52b181_1920x1080.jpg">
<div class="text-recc">
<h1>Outdoor Activities</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
<div class="item">
<img id="image-recc" src="Images/57d430adfd8663a061e26c677ac9298e.jpg">
<div class="text-recc">
<h1>Top Attractions</h1>
<p>“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
</section>
Related
Facing this weird issue where i have a div with overflow scroll. It is behaving differently in firefox and chrome.
It works in chrome but not in firefox, I see empty lines in Firefox.
what is going on here?
https://stackblitz.com/edit/web-platform-rdzpnu?file=styles.css
.continer {
border: 1px solid #ddd;
padding: 12px;
max-height: 500px;
/** works in chrome **/
/* height: 500px; doesn't work */
display: flex;
flex-direction: column;
}
.logs-grid {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr;
column-gap: 1rem;
row-gap: 1rem;
overflow-y: scroll;
}
.log {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px solid gray;
}
<div class="continer">
<h3> Recent Logs
</h3>
<div class="logs-grid">
<div class="log">Voluptate nihil in quisquam nam eos ea placeat culpa veritatis.
</div>
<div class="log">Sit reiciendis non sit iste sequi.</div>
<div class="log">Omnis consequuntur et voluptatum veniam nam.</div>
<div class="log">Maxime quia quis laborum.</div>
<div class="log">Exercitationem enim perferendis hic ut qui tempore debitis omnis ab.</div>
<div class="log">Ea aut numquam odit officia dolores totam et.</div>
<div class="log">Quis laudantium a itaque molestiae corporis rerum sequi sed perspiciatis.</div>
<div class="log">Aut ducimus expedita qui.</div>
<div class="log">Sed eum inventore ex animi ut laudantium non unde.
</div>
<div class="log">Dignissimos facilis expedita distinctio eaque laudantium aliquam harum sit.</div>
<div class="log">Necessitatibus ab aliquid ab asperiores suscipit voluptas illum qui.</div>
<div class="log">Ut magni earum ut suscipit ipsa recusandae deserunt eius nihil.
</div>
<div class="log">Reiciendis minima ipsam occaecati.</div>
<div class="log">Quo mollitia laboriosam est ullam sequi.</div>
<div class="log">Saepe quos soluta praesentium placeat laudantium consequatur possimus autem modi.</div>
<div class="log">Non non ducimus fuga dolores soluta amet quaerat.</div>
<div class="log">Consequatur reiciendis nemo voluptatum aut ut.</div>
<div class="log">Sint nobis sit et et aut placeat.</div>
<div class="log">Quis quo libero sit odit.</div>
<div class="log">Accusantium in fugiat quia veniam dicta perspiciatis.
</div>
<div class="log">Unde nostrum quo ea iste consequatur et non reiciendis.
</div>
<div class="log">Expedita exercitationem fuga sint harum culpa asperiores sed officia.</div>
<div class="log">Sed voluptatem nostrum itaque harum iusto qui enim nam.
</div>
<div class="log">Consectetur vero ut ut aspernatur eos ea nesciunt.
</div>
<div class="log">Qui vero repellendus aut dolor quas voluptatem dolore.
</div>
<div class="log">Aut odit voluptatem fugiat error cum aut ea tempora sint.
</div>
<div class="log">Aperiam unde et molestias.</div>
<div class="log">Quasi vel ex facilis dolor sequi repudiandae quas explicabo.
</div>
<div class="log">Non ut sit autem sunt quia.</div>
<div class="log">Fugit veritatis in.</div>
<div class="log">Suscipit sequi et amet inventore vel et porro.</div>
<div class="log">Totam esse voluptatem qui.</div>
<div class="log">Aut hic suscipit.</div>
<div class="log">Quas molestias illum similique non ratione distinctio exercitationem nemo accusamus.</div>
<div class="log">Quia velit eos aut eveniet.</div>
<div class="log">Eum rem nostrum est.</div>
<div class="log">Aliquid ut molestiae totam aut.</div>
<div class="log">Maxime inventore sit nostrum voluptatibus quia quas explicabo.
</div>
<div class="log">Quos sed aut odio fugit delectus culpa aut.</div>
<div class="log">Voluptatem quod autem qui repellendus quia voluptate.
</div>
<div class="log">Aut vero dolores vero.</div>
<div class="log">Qui alias velit dolor minima perspiciatis enim facilis officiis aut.</div>
</div>
</div>
This looks like a bug in Firefox with nesting an overflowing grid container inside a flex container.
(By the way, nesting a column-direction flex container has the same problem.)
I would suggest you use standard block layout (display: block) for the nested div. It seems to work fine across browsers.
.continer {
border: 1px solid #ddd;
padding: 12px;
max-height: 500px;
display: flex;
flex-direction: column;
}
.logs-grid {
flex: 1;
overflow-y: scroll;
}
.log {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px solid gray;
margin-bottom: 10px;
}
<div class="continer">
<h3> Recent Logs
</h3>
<div class="logs-grid">
<div class="log">Voluptate nihil in quisquam nam eos ea placeat culpa veritatis.
</div>
<div class="log">Sit reiciendis non sit iste sequi.</div>
<div class="log">Omnis consequuntur et voluptatum veniam nam.</div>
<div class="log">Maxime quia quis laborum.</div>
<div class="log">Exercitationem enim perferendis hic ut qui tempore debitis omnis ab.</div>
<div class="log">Ea aut numquam odit officia dolores totam et.</div>
<div class="log">Quis laudantium a itaque molestiae corporis rerum sequi sed perspiciatis.</div>
<div class="log">Aut ducimus expedita qui.</div>
<div class="log">Sed eum inventore ex animi ut laudantium non unde.
</div>
<div class="log">Dignissimos facilis expedita distinctio eaque laudantium aliquam harum sit.</div>
<div class="log">Necessitatibus ab aliquid ab asperiores suscipit voluptas illum qui.</div>
<div class="log">Ut magni earum ut suscipit ipsa recusandae deserunt eius nihil.
</div>
<div class="log">Reiciendis minima ipsam occaecati.</div>
<div class="log">Quo mollitia laboriosam est ullam sequi.</div>
<div class="log">Saepe quos soluta praesentium placeat laudantium consequatur possimus autem modi.</div>
<div class="log">Non non ducimus fuga dolores soluta amet quaerat.</div>
<div class="log">Consequatur reiciendis nemo voluptatum aut ut.</div>
<div class="log">Sint nobis sit et et aut placeat.</div>
<div class="log">Quis quo libero sit odit.</div>
<div class="log">Accusantium in fugiat quia veniam dicta perspiciatis.
</div>
<div class="log">Unde nostrum quo ea iste consequatur et non reiciendis.
</div>
<div class="log">Expedita exercitationem fuga sint harum culpa asperiores sed officia.</div>
<div class="log">Sed voluptatem nostrum itaque harum iusto qui enim nam.
</div>
<div class="log">Consectetur vero ut ut aspernatur eos ea nesciunt.
</div>
<div class="log">Qui vero repellendus aut dolor quas voluptatem dolore.
</div>
<div class="log">Aut odit voluptatem fugiat error cum aut ea tempora sint.
</div>
<div class="log">Aperiam unde et molestias.</div>
<div class="log">Quasi vel ex facilis dolor sequi repudiandae quas explicabo.
</div>
<div class="log">Non ut sit autem sunt quia.</div>
<div class="log">Fugit veritatis in.</div>
<div class="log">Suscipit sequi et amet inventore vel et porro.</div>
<div class="log">Totam esse voluptatem qui.</div>
<div class="log">Aut hic suscipit.</div>
<div class="log">Quas molestias illum similique non ratione distinctio exercitationem nemo accusamus.</div>
<div class="log">Quia velit eos aut eveniet.</div>
<div class="log">Eum rem nostrum est.</div>
<div class="log">Aliquid ut molestiae totam aut.</div>
<div class="log">Maxime inventore sit nostrum voluptatibus quia quas explicabo.
</div>
<div class="log">Quos sed aut odio fugit delectus culpa aut.</div>
<div class="log">Voluptatem quod autem qui repellendus quia voluptate.
</div>
<div class="log">Aut vero dolores vero.</div>
<div class="log">Qui alias velit dolor minima perspiciatis enim facilis officiis aut.</div>
</div>
</div>
It seems like your .log elements have no height on firefox because of the overflow-x: hidden; on it.
You can give them a height, or make your grid cells heigh enough:
.logs-grid {
grid-auto-rows: max-content;
}
I'm trying to handle 3 columns, each of one with independent scroll.
The first column has a absolute element which should overflow on x axis but overflow-x:visible is not working combined with overflow-y: auto
Can you help me?
.container {
display: flex;
}
.column2 {
width: 60%;
background-color: #bababa;
height: 5000px;
}
.side-column {
width: 20%;
background-color: #eeeeee;
height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
overflow-x: visible;
}
.side-content {
width: 100%;
height: 3000px;
}
.picker {
position: absolute;
top: 25px;
left: 25px;
height: 300px;
width: 300px;
background-color: #f00;
}
.column3 {
height: 100px;
}
<div class="container">
<div class="side-column">
<div class="side-content">
column1
<div class="picker"></div>
</div>
</div>
<div class="column2">
content
</div>
<div class="side-column column3">
<div class="side-content">
column3
</div>
</div>
</div>
https://jsfiddle.net/burro92/nvepx7dL/
Try to avoid unused boxes...
The overflow: auto; only works when the inner content has more width or height than the container. If so it will add scroll-bar automatically.
what about this code...
HTML
<div class="container">
<div class="column1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
<div class="column2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
<div class="column3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
</p>
</div>
</div>
CSS
.container{
display: flex;
}
.column1{
width: 20%;
height: 300px;
background-color: rgb(211, 210, 210);
overflow: auto;
}
.column2{
width: 60%;
height: 300px;
background-color: rgb(255, 255, 255);
overflow: auto;
}
.column3{
width: 20%;
height: 300px;
background-color: rgb(211, 210, 210);
overflow: auto;
}
Output
It will add a scroll bar automatically where needed.
But if you want scroll bar in a specific side just change overflow: auto; to either overflow-y: auto; or overflow-x: auto;.
Do not make it as overflow: scroll; because it will always add a scroll bar whether it is scrollable or not. So avoid using this
I want to indent the multiple lined text so that all the lines start after the background image.
However it is now being overlaid on the icon.
div {
width: 400px;
}
p.mytext {
text-indent: 20px;
background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
background-size: 30px 30px;
}
<div class="parent">
<p class='mytext'>
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
</p>
</div>
Could somebody help me achieve it? without changing the html. Only css solution is preferred.
Just add padding to the <p> tag since that has the background-image
div {
width: 400px;
}
p.mytext {
background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
background-size: 30px 30px;
padding-left: 50px;
}
<div class="parent">
<p class='mytext'>
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
</p>
</div>
"could the first line also be aligned with the rest of the text?"
Just take your text-indent out of your css
div {
width: 400px;
}
p.mytext {
background: #8981C0 url(https://image.flaticon.com/icons/png/128/148/148767.png) no-repeat 10px;
background-size: 30px 30px;
padding-left: 50px;
}
<div class="parent">
<p class='mytext'>
perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
</p>
</div>
What is the best way to achieve this layout:
I believe that this HTML is good, I just need the CSS:
<div>
<header style="background:blue"></header>
<div>
<nav>
<header style="background:darkgreen"></header>
<ul style="background:green">...</ul>
</nav>
<div>
<header style="background:darkred"></header>
<main style="background:red"></main>
</div>
</div>
</div>
I've tried flexbox, but I'm finding myself doing weird css calc() to get the green and red div's to stretch to the bottom.
(I'm looking for a modern, solid way- not hacks)
I am not sure how to do with your HTML. And not sure what you mean by Holy Grail. I just did this, with semantic tags and which has no hacks, compatible over a range of browsers from Internet Explorer 7:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
background-color: #fcc;
}
header {
position: fixed;
top: 0;
background-color: #66f;
left: 0;
right: 0;
height: 35px;
line-height: 35px;
}
aside {
position: fixed;
left: 0;
top: 35px;
width: 200px;
bottom: 0;
}
aside header {
position: absolute;
background-color: #f90;
}
aside .content {
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: #fc6;
}
main {
margin: 40px 10px 10px 210px;
}
main header {
top: 35px;
left: 200px;
background-color: #f33;
line-height: 20px;
height: 20px;
}
<header>
...
</header>
<aside>
<header>
...
</header>
<div class="content">
<p>Content goes here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae unde, eligendi dolores laborum aliquid voluptatem ducimus adipisci dolorem quod ipsum corrupti soluta. Eveniet repellendus sed cumque, consectetur eum magni saepe!</p>
<p>Tenetur debitis nemo, itaque ipsa, eum tempore doloribus mollitia quas nulla accusantium unde officia rerum optio quasi a dicta error distinctio iusto, provident deleniti? Commodi perspiciatis qui ratione autem sequi.</p>
<p>Placeat saepe libero sunt cupiditate. Expedita molestias, error sequi mollitia consequatur iste aliquid deserunt deleniti repellat saepe vitae necessitatibus eum. Soluta nemo dicta fugit repellendus! Dignissimos, aliquid. Iusto, voluptatum, voluptatibus.</p>
<p>Sequi eaque officiis ab dolores aliquid, harum, nemo nam et deleniti quo aliquam, placeat, est natus iusto. Impedit assumenda ullam, tempore saepe rem adipisci, id ex, iste, dignissimos doloribus corrupti!</p>
<p>Illum nemo nihil, exercitationem autem ullam, aliquam dolorum inventore laborum quasi similique neque vero aliquid ad perferendis asperiores iusto? Quo autem recusandae, obcaecati iusto quas minus dicta reprehenderit magni quaerat.</p>
<p>Excepturi magnam rerum facere culpa a harum explicabo nostrum aspernatur. Molestiae voluptates exercitationem hic assumenda nesciunt fugit error nemo sapiente nihil consequatur illo omnis ipsum reiciendis, veniam rerum, eaque asperiores!</p>
<p>Iusto fugit mollitia, non deserunt assumenda nobis saepe id, dolorum cum culpa magni ea consectetur odio possimus facere velit voluptatum aperiam quibusdam hic, esse animi debitis. In qui cupiditate iste!</p>
<p>Eveniet nam vero maiores reiciendis totam pariatur magni tempora, rerum magnam ex, blanditiis a, odit labore consectetur ea modi minus dolore aspernatur voluptates. Magnam, hic sed omnis vel delectus? Eligendi.</p>
<p>Eveniet nesciunt laborum a officiis, numquam magnam, incidunt libero unde dolorum voluptatum, ducimus illo in eum reiciendis ad dolor eos consequuntur saepe ex repellat porro quae. Voluptatum architecto cupiditate officia.</p>
<p>Voluptate, voluptatem culpa explicabo distinctio obcaecati quia molestiae blanditiis optio quis nihil, ipsam similique molestias exercitationem quas itaque, dignissimos quisquam modi. Impedit et dolorum, laboriosam modi aliquam dolor quasi possimus!</p>
<p>Ad dolores consequuntur accusantium laborum, provident laudantium quas voluptatibus exercitationem distinctio adipisci, corporis, amet alias optio nisi! Doloremque incidunt debitis molestiae eius similique facere nobis libero esse temporibus quisquam,
aperiam?</p>
<p>Quis accusamus itaque adipisci modi perspiciatis provident suscipit assumenda totam quo placeat reiciendis, nulla ad aperiam nobis sint velit ducimus eos culpa cupiditate in, quod veritatis nihil ut quidem! Ab.</p>
<p>Consequuntur maiores quas alias labore architecto laboriosam nisi voluptatum impedit rem. Doloribus cumque, unde ducimus possimus, voluptate cupiditate veniam est, sequi, libero velit ipsa ab deleniti earum odio? Minus, earum.</p>
<p>Molestiae iusto placeat vitae mollitia maxime ipsa ad in praesentium quasi cupiditate temporibus doloremque numquam, veritatis esse et odio dolores rerum iure alias quis, quisquam, amet maiores. Sequi, eaque reprehenderit.</p>
<p>Qui hic voluptatum adipisci reprehenderit repudiandae, libero illum aliquam iure, dolores tempora, quo consequuntur odit. Exercitationem blanditiis sunt, ea consequuntur, incidunt dolor harum neque fugiat natus tempore assumenda, deleniti dolorem?</p>
</div>
</aside>
<main>
<header>
...
</header>
</main>
Preview
If you want using flex for that do this:
<div style="display:flex;flex-direction:column;height: 100vh;">
<div style="background-color:blue;height:50px;"></div>
<div style="background-color:red;flex:1;display: flex;">
<div style="background-color: green;flex: 1;">
<div style="background-color: darkgreen;height: 80px;"></div>
<div style="overflow-y: scroll;"></div>
</div>
<div style="background-color: red;flex: 2;">
<div id="navBar" style="background-color:darkred;height:40px;"></div>
</div>
</div>
</div>
Sorry my code is not clean.
I have a blockquote, where the citation symbols is generated with CSS Content, using pseudo-selectors :before and :after like so:
div.paragraph blockquote::before, div.paragraph blockquote::after {
font-size: 4em;
color: #999;
position: absolute;
}
div.paragraph blockquote::before {
content: "“201C";
top: 0;
left: 0;
}
div.paragraph blockquote::after {
content: "”201D";
bottom: 0;
right: 0;
}
This generates a blockquote that looks like this:
What I want, is to make the citationsymbols stay inside their respective boxes, so that their baselines would be the same as the text inside the blockquote.
I figure this has something to do with the citationsymbols natural baseline, but perhaps someone can elaborate?
One way to fix it could be to give the citationsymbols a negative margin of its relative font-size, but I'm looking for a more "correct" solution, or an explanation as to why citationsymbols act like this.
EDIT: Adding position:relative; to div.paragraph does not fix this problem, as it already has position:relative.
<style>
div.paragraph{
width:50%;
margin:auto;
}
div.paragraph blockquote{
position:relative;
}
div.paragraph blockquote::before, div.paragraph blockquote::after {
font-size: 4em;
color: #999;
}
div.paragraph blockquote::before {
content: "“";
top:-0.4em;
left: -0.6em;
position: absolute;
}
div.paragraph blockquote::after {
content: "”";
right: 0;
position: absolute;
}
</style>
<div class='paragraph'>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<blockquote>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</blockquote>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
It seems you need to set the "div.paragraph blockquote" as relative, which is treated as the parent container of before and after contents
OK I understand your problem, what you have do is add css for:
div.paragraph {position:relative; }
This defines context for its child