I am making cards using flexbox(https://jsfiddle.net/vs37qo0r/):
/* Only included flex related styles*/
.container {
display: flex;
flex-direction: row;
/*default*/
align-items: stretch;
/*default*/
justify-content: space-around;
}
.card {
flex-basis: 20%;
}
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<!-- two more cards of same format-->
</div>
Each <h3> and <p> line up with each other. But, not every <p> is the same size, which then throws off where the <button> is layed out. How can I tell all of the <button>s to line up with each other regardless of the size of the <p> above it?
Set .card to display: flex
Enclose h3, p in a wrapper with flex: 1
Set the button to be at flex-end
jfFiddle
body{
background-color: white;
margin-top: 100px;
padding: 0;
}
.container{
display:flex;
flex-direction: row; /*default*/
align-items: stretch; /*default*/
justify-content: space-around;
}
.card{
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
}
.card__content {
flex: 1;
}
.button {
align-self: flex-end;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="card__content">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
jsFiddle
There is no need for a wrapper or more than 3 additional properties. Set .card to flex:
.card {
display:flex;
flex-direction: column;
....
}
Set .card p to flex: 1
.card p {
flex: 1;
}
Try making the .card elements flex-parents themselves, then play with the justify-content property.
.card{
…
display: flex;
flex-direction: column;
justify-content: space-between;
}
body {
background-color: white;
margin-top: 100px;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
/*default*/
align-items: stretch;
/*default*/
justify-content: space-around;
}
.card {
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
I'm working with you jsfiddle version:
there I added these extra code, and you never have to touch your HTML for it!
.card{
...
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: auto !important;
}
and it's working fine!
body {
background-color: white;
margin-top: 100px;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
/* default */
align-items: stretch;
/* default */
justify-content: space-around;
}
.card {
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: auto;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
You need to add display: flex, flex-dicrection: column and justify-content: space-between.
Your new css .card class looks like:
.card{
flex-basis: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
I hope this will work for you!
Related
The following is the given html code and I am not allowed to alter it by any means
#exceriseHead {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
body {
color: gainsboro;
text-align: center;
}
p {
color: black
}
.exEnumeration {
color: green;
}
#exceriseFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
.contentcolumnContent {
display: flex;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Abgabeseite 3</title>
<link rel="stylesheet" href="cssaufgabe2.css">
<!-- TODO: Import der CSS Datei -->
</head>
<body>
<h1>Übungsblatt 4</h1>
<div id="exceriseHead">
Aufgabe 3
</div>
<div class="contentcolumnContent">
<div class="exercisePart">
<div class="exEnumeration">
<h1>a.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>b.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>c.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
</div>
<div id="exceriseFooter">
[Gruppenbezeichnung]
</div>
</body>
</html>
This is how it looks
This is how it should look like
Hi, I got an assignment to write a css sheet in order to make a given html page look like the image below. However I can't figure out, how to put the enumerations ( a.), b.)and c.)) in front of the text. I hope you can help me :(
The work is almost done: for the .exercisePart elements you need to set flex-grow and flex-shrink to 1. display: flex and align-items: center so the letter and the text can be side by side
A small gap to the outer flexbox container may improve readability.
#exceriseHead {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
body {
color: gainsboro;
text-align: center;
}
p {
color: black
}
.exEnumeration {
color: green;
}
#exceriseFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
color: black;
}
.contentcolumnContent {
display: flex;
gap: 1rem;
justify-content: space-between;
}
.exercisePart {
flex: 1 1 auto;
display: flex;
gap: .25rem;
align-items: center;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Abgabeseite 3</title>
<link rel="stylesheet" href="cssaufgabe2.css">
<!-- TODO: Import der CSS Datei -->
</head>
<body>
<h1>Übungsblatt 4</h1>
<div id="exceriseHead">
Aufgabe 3
</div>
<div class="contentcolumnContent">
<div class="exercisePart">
<div class="exEnumeration">
<h1>a.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>b.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
<div class="exercisePart">
<div class="exEnumeration">
<h1>c.)</h1>
</div>
<div>
<!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p>
</div>
</div>
</div>
<div id="exceriseFooter">
[Gruppenbezeichnung]
</div>
</body>
</html>
The .exerciseParts contain two <div>s, which by default have display: block, meaning they take all the width they can from their container, thus stacking vertically.
In order to change that, you can make the .exercisePart flexbox containers:
.exercisePart {
display: flex;
}
That way by default all their children will stack horizontally and try and take the right amount of space.
I have a div innerDetails which is a flex item with code as specified below:
.cover{
height: 100vh;
width: 100%;
}
#screenContainer{
display: flex;
justify-content: center;
align-items: center;
}
#screen{
height: 90vh;
width: 87vw;
background-color: #eeeeee;
border-radius: 2%;
display: flex;
justify-content: space-around;
align-items: center;
}
#innerScreen{
background-color: #060b22;
height: 80vh;
width: 80vw;
padding: 15px;
}
#details{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap-reverse;
}
.innerDetails{
height: 100%;
width: 45%;
font-size: 1.7vw;
color: rgb(255, 117, 67);
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
#backImage{
background-image: url(https://placehold.it/250px250);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="cover" id="screenContainer">
<div id="screen">
<div id="innerScreen">
<p class="heading" id="arr"></p>
<div id="details">
<div class="innerDetails">
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
</div>
<div id="backImage" class="innerDetails">fdbd</div>
</div>
</div>
</div>
</div>
(Well, there is a lot of code but I thin without it, reproducing my problem would not be possible. Some values are in vh and vw so expand the results.)
The problem is that the div's height is automatically decreasing from my specified height (100%) to 0%.
I thought it is so because there is no content inside the div, just a background-image. So I added some padding to it but it didn't work.
However, If I insert some text in the div, only that much part has the background image.
Just remove the height: 100% from .innerDetails
.cover {
height: 100vh;
width: 100%;
}
#screenContainer {
display: flex;
justify-content: center;
align-items: center;
}
#screen {
height: 90vh;
width: 87vw;
background-color: #eeeeee;
border-radius: 2%;
display: flex;
justify-content: space-around;
align-items: center;
}
#innerScreen {
background-color: #060b22;
height: 80vh;
width: 80vw;
padding: 15px;
}
#details {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap-reverse;
}
.innerDetails {
/* height: 100%; */
width: 45%;
font-size: 1.7vw;
color: rgb(255, 117, 67);
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
#backImage {
background-image: url(https://placehold.it/250px250);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="cover" id="screenContainer">
<div id="screen">
<div id="innerScreen">
<p class="heading" id="arr"></p>
<div id="details">
<div class="innerDetails">
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
</div>
<div id="backImage" class="innerDetails">fdbd</div>
</div>
</div>
</div>
</div>
It works but the #details doesn't actually have a height. Add height: 100% to #details and see the result.
.cover {
height: 100vh;
width: 100%;
}
#screenContainer {
display: flex;
justify-content: center;
align-items: center;
}
#screen {
height: 90vh;
width: 87vw;
background-color: #eeeeee;
border-radius: 2%;
display: flex;
justify-content: space-around;
align-items: center;
}
#innerScreen {
background-color: #060b22;
height: 80vh;
width: 80vw;
padding: 15px;
}
#details {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap-reverse;
height: 100%; /* or 300px etc */
}
.innerDetails {
height: 100%;
width: 45%;
font-size: 1.7vw;
color: rgb(255, 117, 67);
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
#backImage {
background-image: url(https://placehold.it/250px250);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="cover" id="screenContainer">
<div id="screen">
<div id="innerScreen">
<p class="heading" id="arr"></p>
<div id="details">
<div class="innerDetails">
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
</div>
<div id="backImage" class="innerDetails">fdbd</div>
</div>
</div>
</div>
</div>
I'm trying to align content in a flex box centered (vertical and horizontal). In my example it works as long the screen is big enough.
Problems:
When the content is bigger than 100vh in the ".wrapper" class. The content will be cut of at the top.
When i set the ".wrapper" to "100vh" and I add the ".header" div, this div should be excluded from the "100vh" otherwise i will get a scrollbar for nothing.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>FlexBox</title>
<meta name="infoription" content="">
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f8f9fa;
font-family: Roboto,Helvetica,Arial,Lucida,sans-serif;
color: #55595c;
}
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
flex-wrap: wrap;
}
.content {
background-color: #ffffff;
max-height: 350px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
margin: 10px;
position: relative;
border: 1px solid #dfdfdf;
border-radius: 0.25rem;
}
.content:after {
/* background: none repeat scroll 0 0 transparent; */
bottom: 0;
content: "";
display: block;
height: 10px;
left: 50%;
position: absolute;
background: #55595c;
transition: width 0.4s ease 0s, left 0.4s ease 0s;
width: 0;
}
.content:hover:after {
width: 100%;
left: 0;
}
.thumb {
background-color: #55595c;
height: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.info {
padding: 10px;
text-align: justify;
}
/* Responsive layout - screen is bigger than 1000px wide */
#media (min-width: 1000px) {
.bodysize {
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="bodysize">
<div class="header">
<h1>Example Page</h1>
</div>
<div class="wrapper">
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[1]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[2]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[3]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[4]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[5]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[6]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[7]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[8]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[9]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Example pictures:
Problem 1 - scrollbar because of "height: 100vh;".
Problem 2 - content floating out of the browser top. also because of "height: 100vh;".
Questions:
1) How can I set a dynamic height so the wrapper always fills the rest of the available space?
2) If the content is smaller than than the wrapper height it should be centered vertical but if the content is bigger, there is not center needed.
Any ideas how I can fix this?
>>> SOLUTION <<<
I added the .bodysize, removed the height from the wrapper and added "flex-grow: 1" to the wrapper. .bodysize { display: flex; flex-flow: column; height: 100vh; }
Try to set height: auto; and max-height: 100vh; at your wrapper.
Otherwise, your wrapper always would have 100% height even having few elements inside. The scrollbar would should appear when the content exceeds 100vh.
.wrapper {
display: flex;
justify-content: center;
align-content: center;
height: auto;
max-height: 100vh;
flex-wrap: wrap;
}
I have two flexbox columns, one with an image and one with some text.
I would like to place a div underneath these two columns, like an 'underlay' filled with colour.
This screenshot shows the grey box I am trying to place under the column content.
It would also be ideal if this 'underlay' is the same height as the text. I have tried setting the containing row to position: relative and then creating an ::after that is absolutely positioned as the colour fill, but could not work it out.
I have created a fiddle that shows my work so far.
.cheetos-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.cheetos-row::after {
background-color: red;
height: 200px;
width: 200px;
}
.cheetos-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.cheetos-column h2 {
color: #F15A22;
}
.cheetos-column img {
height: 500px;
width: auto;
margin: 0 auto;
}
#media (max-width: 768px) {
.cheetos-row {
display: block;
}
}
<div class='cheetos-row'>
<div class='cheetos-column'>
<p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image">
</p>
</div>
<div class='cheetos-column'>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h2>
<p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
<p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
<p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
<p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
</div>
</div>
I just set background color with help of ::after pseudo-element property something like below snippet.
.cheetos-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
position: relative;
}
.cheetos-row::after {
content: "";
top: 0;
left: 0;
position: absolute;
background-color: #bababa;
height: 100%;
width: 100%;
z-index: -1;
}
.cheetos-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.cheetos-column h2 {
color: #F15A22;
}
.cheetos-column img {
max-height: 500px;
width: auto;
max-width:100%;
margin: 0 auto;
}
#media (max-width: 768px) {
.cheetos-row {
display: block;
}
}
<div class='cheetos-row'>
<div class='cheetos-column'>
<p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image"></p>
</div>
<div class='cheetos-column'>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
<p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
<p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
<p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
</div>
</div>
It may be possible with a series of overlapping divs.
I used CSS grid because it provides line-based placement properties, which allow for grid areas to overlap each other.
The layout below limits the height of the background color to the natural height of the text, while also getting the image to appear to overflow the background color.
It switches to a single-column layout on smaller screens, per your media query.
.cheetos-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: start;
}
.cheetos-column:first-child {
grid-column: 1 / 4;
grid-row: 1;
z-index: 1;
}
.cheetos-column img {
width: 100%;
height: 500px;
object-fit: contain;
object-position: top;
}
.cheetos-column:last-child {
grid-column: 2 / -1;
grid-row: 1;
background-color: gray;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.cheetos-column:last-child > * {
grid-column: 3 / -1;
}
#media (max-width: 768px) {
.cheetos-row,
.cheetos-column:last-child {
display: block; /* stacks content & deactivates all grid properties */
}
.cheetos-column img {
width: 100%;
height: auto;
}
}
.cheetos-column h2 {
color: #F15A22;
}
<div class='cheetos-row'>
<div class='cheetos-column'>
<p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image">
</p>
</div>
<div class='cheetos-column'>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h2>
<p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
<p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
<p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
<p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
</div>
</div>
jsFiddle demo
In the below code, I want all the three boxes to have same height and also the links in the three boxes should be in same line as shown in the screenshot below. I have used flexbox for doing this. Please help.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
Remove align-items: flex-start; from the wrapper, give the div display: flex; flex-direction: column;, and set margin-top: auto on the links
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
display: flex; /* added property */
flex-direction: column; /* added property */
}
.wrapper div a { /* added rule */
margin-top: auto;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
.wrapper {
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
display: flex;
flex-basis: 33%;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 10px 4%;
}
.wrapper div a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>