Currently, I'm working on getting two flexboxes on each row. Here is the current layout:
https://i.sstatic.net/UsAI6.jpg
Here is the desired layout I'm aiming for: https://i.sstatic.net/wRhw4.jpg
I want to have 4 flexboxes in total, with 2 on each row. The first and third should have the same width, while the second and fourth should also have the same width. I've been experimenting with different options but haven't found the right solution yet. Any recommendations?
.left {
background: #808080;
flex-grow: 1;
order: 1;
color: white;
font-family: Arial, Helvetica, sans-serif;
flex-wrap: wrap;
flex-direction: row;
width: 25%;
}
.left,
.right {
margin: 20px 20px;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
.left.fixedsize {
flex-basis: 25%;
}
.second img {
margin: auto;
display: block;
padding-bottom: 10px;
padding-top: 10px;
}
/*ADD-BUTTON*/
.left.fixedsize button {
margin: auto;
display: block;
color: black;
background-color: white;
padding-bottom: 10px;
padding-top: 10px;
border-style: solid;
border-color: black;
border-width: 2px 2px 2px 2px;
border-radius: 15px 15px 15px 15px;
}
.left.fixedsize button:hover {
color: orange;
}
/*RIGHT*/
.right {
background: #808080;
flex-grow: 1;
order: 1;
color: white;
font-family: Arial, Helvetica, sans-serif;
flex-wrap: wrap;
flex-direction: row;
width: 75%;
}
.right h1 {
margin-top: 20px;
}
.fixedsize {
flex-basis: 75%;
}
.third img {
padding: 10px;
}<!--LEFT-->
<main>
<div class="left fixedsize">
<ul class="second">
<li>
<img src="TheIntouchables3.jpg" width="265" height="400" align="middle">
</li>
<li>
<img src="TheIntouchables1.jpg" width="265" height="400" align="middle">
</li>
</ul>
</div>
<!--RIGHT-->
<div class="right fixedsize">
<h1>The Intouchables</h1>
<p>FRA 2011 (112 min)
<br>Olivier Nakache / Eric Toledano
<br>
...
(Additional content)
...
<br>
<br>Watch trailer <a href="https://www.youtube.com/watch?v=34WIbmXkewU">HERE</a>
</p>
<ul class="third">
<li>
<img src="TheIntouchables2.jpg" width="600" height="385">
</li>
</ul>
</div>
</div>
</div>
</main>