This question already has answers here:
Text in a flex container doesn't wrap in IE11
(13 answers)
Closed 5 years ago.
In spite of all my research, I can not fix the position of my grid with flexbox on IE11. There is no problem on other browsers, including Edge.
I have read the specifications of Flexbox on caniuse, but I still do not see how to solve my problem without breaking the setup on other browsers.
An idea ? Thank you very much.
Codepen here.
CSS:
* {
box-sizing: border-box;
}
.steps {
.steps-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.step {
align-items: center;
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding: 20px;
width: 25%;
#media (max-width: 740px) {
padding-bottom: 30px;
width: 48%;
}
}
.step__thumb {
background-color: #f7f7f7;
border-radius: 50%;
color: red;
font-size: 1.4rem;
font-weight: 500;
height: 110px;
line-height: 110px;
margin-bottom: 18px;
width: 110px;
}
.step__text {
color: lighten(#202124, 20%);
font-size: 1.4rem;
font-weight: 300;
list-style: circle;
text-align: left;
}
}
HTML:
<section class="band steps">
<div class="wrapper">
<div class="steps-list">
<div class="step">
<div class="step__thumb"></div>
<div class="step__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias similique quidem ab ratione expedita, repellat laborum praesentium, pariatur a nulla ipsa alias corrupti eum illum fugiat saepe quos unde iste.
</div>
</div>
<div class="step">
<div class="step__thumb"></div>
<div class="step__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias similique quidem ab ratione expedita, repellat laborum praesentium, pariatur a nulla ipsa alias corrupti eum illum fugiat saepe quos unde iste.
</div>
</div>
<div class="step">
<div class="step__thumb"></div>
<div class="step__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias similique quidem ab ratione expedita, repellat laborum praesentium, pariatur a nulla ipsa alias corrupti eum illum fugiat saepe quos unde iste.
</div>
</div>
<div class="step">
<div class="step__thumb"></div>
<div class="step__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias similique quidem ab ratione expedita, repellat laborum praesentium, pariatur a nulla ipsa alias corrupti eum illum fugiat saepe quos unde iste.
</div>
</div>
</div>
</div>
</section>
Add width: 100% to .step__text
codepen
I'm not entirely sure why this works, but I had a similar issue before, and defining a width seemed to work.
Related
The empty space (you'll see when you put in the code) is where the cards should be stacked in a column like orientation like this
I am trying to fill that white space with the cards in that fashion but the sidebar keeps pushing it down and I've tried merging them and creating different divs to separate but no matter what it stays below and I do not know why.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.Cards {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1 1 0;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
margin: 0;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
I would prefer if the solution was found ONLY using flexbox, no margin or anything.
Solution using the requested flex. You have to set flex on the main parent in this case .contents.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.contents {
display: flex;
}
.Cards {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1 1 0;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
margin: 0;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
Use flex attribute Wrapping !!
flex-wrap: wrap;
By using this your white card automatically come down by take a line break.
This can be easily done using Grid Layout. Just changed the contents container to flex and used grid for Cards container.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.contents {
display: flex;
}
.Cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
padding: 12px;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
margin: 0;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
padding: 12px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
I want to make 3 blocks with flex.
the first must occupy an entire column and the other 2 must be arranged in the second column with 50% of the height each. the first of the second column being an image, I would like the third, which contains only text, to be the same height.
unfortunately, even if this text block seems to have the same size as my image, the size of the 1st column is limited to the end of the text in this block.
.superposition {
display: flex;
width: 70%;
}
.block-orange {
background-color: #F26522;
color: white;
padding: 10px;
flex: 0 0 30%;
}
.superposition .flex-col {
display: flex;
flex-direction: column;
}
.superposition div div {
flex: 0 0 50%;
}
.bg-white {
background-color: yellow;
color: #627188;
}
.bg-grey{
background-color: grey;
}
<section class="superposition">
<div class="block-orange">
<h2>bright ass orange</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
</div>
<div class="flex-col">
<div class="bg-grey">
<img src="img/header-soleil.png" alt="couché de soleil">
</div>
<div class="bg-white">
<h2>finaly a layout that blows your head off</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
</p>
</div>
</div>
</section>
why the first column (block-orange) does not adapt in height to the second column?
It seems that you want a grid in which:
Content can expand column height.
Column heights always match.
Two rows are each 50% column height.
This sounds like a "two-dimensional" layout, controlled by both row and column.
Building such layouts with flexbox will likely be a struggle and/or produce fragile layouts.
For reference, see Relationship of grid layout to other layout methods:
do I only need to control the layout by row or column – use a flexbox
do I need to control the layout by row and column – use a grid
Also see Equal height rows in CSS Grid Layout.
I recommend a grid layout instead.
Here's a demonstration:
body {
margin: 0;
}
.superposition {
display: grid;
grid-template-columns: 30% 40%;
grid-auto-rows: 1fr;
}
.block-orange {
background-color: orange;
grid-row: 1/3;
}
.bg-grey {
background-color: grey;
}
.bg-white {
background-color: yellow;
}
.bg-grey img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cellpad {
box-sizing: border-box;
padding: 1em;
}
<section class="superposition">
<div class="block-orange cellpad">
<h2>bright orange</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
</div>
<div class="bg-grey">
<img src="https://fakeimg.pl/440x320/282828/eae0d0/" alt="">
</div>
<div class="bg-white cellpad">
<h2>finally a layout that blows your mind</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
</p>
</div>
</section>
To achieve the result you are looking for, one approach would be to apply
flex-direction: column;
to the entire .superposition parent <div>, in combination with:
flex-wrap: wrap;
which will ensure that if .block-orange occupies 100% of the height of .superposition, then .bg-grey will follow it by starting at the top of .superposition, to the right of .block-orange.
i.e. The divs are still wrapping but they are wrapping horizontally, rather than wrapping vertically.
Working Example:
.superposition {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 70%;
height: 500px;
}
.block-orange {
flex: 1 0 100%;
width: 30%;
padding: 0 10px;
color: white;
background-color: #F26522;
}
.bg-grey,
.bg-white {
flex: 0 0 50%;
width: 70%;
padding: 0 10px;
}
.bg-white {
color: #627188;
background-color: yellow;
}
.bg-grey {
background-color: grey;
}
<section class="superposition">
<div class="block-orange">
<h2>bright ass orange</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
</div>
<div class="bg-grey">
<img src="img/header-soleil.png" alt="couché de soleil">
</div>
<div class="bg-white">
<h2>Finally, a layout that blows your head off</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.</p>
</div>
</section>
I tried to set to parent block this:
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;
and it works, but it will break if, as example, the second block will be larger. So I am looking for another decision. (I cannot use css-grid)
Codepen Link
Image how it might looks
Try this
.bigger {
height: 300px !important;
}
.smaller {
height: 99px !important;
margin-bottom: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container-fluid">
<div class="row main">
<div class="col-sm-6">
<div class="col-sm-12"><p>
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nihil consequuntur itaque placeat est voluptates, temporibus iste nesciunt dignissimos excepturi.
</p> </div>
<div class="col-sm-12">
<p>
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint optio laudantium dolorem doloremque non praesentium sit. Corporis quisquam soluta, ullam unde deleniti at expedita facilis animi dicta facere quam iste!
</p>
</div>
</div>
<div class="col-sm-6">
<p>
3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate.
</p>
</div>
</div>
</div>
Please have a look at the below working example below, hope it helps :)
body .child {
font-family: sans-serif;
}
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 90%;
margin: 0 auto;
}
.child {
margin: 10px;
padding: 50px 20px;
min-width: 39%;
box-shadow: inset 0 0 0 2px #000;
}
.parent {
max-height: none;
}
.child--1 {
order: 1;
}
.child--2 {
order: 3;
}
.child--3 {
order: 2;
padding: 100px 20px;
}
#media screen and (max-width: 500px) {
.parent {
flex-direction: column;
}
.child {
min-width: auto;
}
}
<div class="parent">
<div class="child child--1">Child 1</div>
<div class="child child--2">Child 2</div>
<div class="child child--3">Child 3</div>
</div>
So I tried to play a bit with my code and was looking on many forums to see if the answer was already given. I didn't find anything yet. I wanted to know how to align the buttons divs to each other, like this :
At this time, my code is this :
.directeur {
width: 50%;
float: left;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.directeur a>img {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
Can someone help me ? I created other Divs, tried Vertical-Align and Inline-Block. I want the Green Button Rectangle to align like this in my code. At the moment, they are not align because of the height of the text box.
Have you tried this.
.custom_element{
position: absolute;
left:0;
right:0;
text-align: center;
}
Replace custom_element with your required element.
This is a job for Flexbox!
Wrap you whold code in a flexbox container, which will ensure all your .directeurs have the same height
Use flexbox for your .directeur, with flex-direction: column to arrange sub-elements vertically.
Set margin-top: auto on your last element (.directeur a) to ensure it will always be a the very bottom of its parent.
.directeurs {
display: flex;
}
.directeur{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.directeur a {
margin-top: auto;
}
.directeur a > img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeurs">
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
</div>
Set a min-height for the Lorem ipsum parts of this to make them the same:
.directeur{
width: 50%;
float: left;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
min-height: 225px;
}
.directeur a>img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
Or you can use some javascript to measure the tallest one then make the other one the same height on page load, something like Equalise.
You can use display:table-cell and position. I have taken the liberty of adding a wrapper around the two .directeurs. See it it works for you.
.directeur-wrapper{
display:table;
}
.directeur{
display:table-cell;
width:50%;
padding:20px 20px 80px;
position:relative;
}
.directeur img{max-width:100%;}
.directeur a{position:absolute; bottom:0;}
<div class="directeur-wrapper">
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
</div>
I created a few div and gave some colours to it in order to see the difference on changes as I code and see that there is a big white spacing between each box.
How can I remove these white spaces?
Here my fiddle: https://jsfiddle.net/Wosley_Alarico/8tgLzjeq/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul>
<li><a id="deposit" href="#">Deposit</a></li>
<li><a id="account" href="#">Account</a></li>
<li><a id="credit" href="#">Credit</a></li>
</ul>
<div class="box deposit">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
<div class="box account">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
<div class="box credit">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
</div>
<div id="random">
<p>This is a random text</p>
</div>
CSS:
li{
list-style:none;
color: white;
width: 30%;
a{
color: white;
text-decoration: none;
&:hover{
color: blue;
}
}
}
ul{
background: black;
padding: 20px 0;
text-align: center;
display: flex;
justify-content: center;
}
.box{
height: 200px;
}
.deposit{
background-color: green;
}
.account{
background: pink;
}
.credit{
background: blue;
}
li a.active{
color: red;
}
Hope you can help
remove the p margins and replace them with paddings if needed: p{margin:0;}