If you add display flex or contents in your CSS for .left class your yellow and purple boxes would be in the same row.
.left{
display: contents;
}
Solution 1 :
Solution 2 :
Servus ChoosenOne! In your code you mixed something. I clean a little bit up.
.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left, .right {
height:30px;
}
.left {
width: 64%;
display: flex;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
}<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>Problem :
The colors are intended for orientation. If you enter this code like this, there should be a big red box on the left and a blue one on the right. In the red box there is a small yellow box on the left and a purple box on the right below it. I want the purple box to be the same height as the yellow one.
.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
align-items: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
float: right;
}<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>Comments
Comment posted by j08691
You used