I'm working on a section of a basic website that requires an image and text on the left and other smaller boxes on the right side.
The left side is supposed to take 60% of the available screen and the right side the other 40%.
I decided to use flexbox since I thought it would make my life a lot easier by basically putting boxes inside boxes and so on.
As the provided code below will show, I have the left flexbox on a width: 60%; and the image inside it a width: 100%; so that it takes 100% of the space available in that 60%. My main problem comes when I bring the second flexbox in. I also give it a width: 40%; but it starts to overlap the other flexbox.
I also tried explicitly giving the parent a width of 100% so that is would divide properly once I got to the children but that didn't do anything...
The project is supposed to look like this:
But the furthest I got by myself is this:
The HTML section for what I'm currently working on is:
<div class="mid_content">
<div class="box_1">
<img
src="./resources/capstone_colmar_assets/images/information-main.jpg"
alt="Man in a white sweater reading a book"
/>
<h2>It doesn't hurt to keep practicing.</h2>
<p>
"Curabitur vitae libero in ipsum portitor consequat. Aliquam et
commodo lectus, nec consequat neque. Sed non accumsan urna.
Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur
dolor consequat, tristique ligula.
</p>
<br />
<br />
<footer>Emanuel, Sr Strategist at Hiring-com</footer>
</div>
<div class="box_2">
<div class="box_2_1">
<img
src="./resources/capstone_colmar_assets/images/information-orientation.jpg"
alt="Birdseye view of people walking "
/>
<div class="asidetext">
<h3>Orientation Date</h3>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_2">
<img
src="./resources/capstone_colmar_assets/images/information-campus.jpg"
alt="Study room with a map of South America on the wall"
/>
<div class="asidetext">
<h3>Our Campus</h3>
<p>Find which campus is close by you</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_3">
<img
src="./resources/capstone_colmar_assets/images/information-guest-lecture.jpg"
alt="Bearded guy older goy wearing glases and a hat turning back"
/>
<div class="asidetext">
<h3>Our guest lecture</h3>
<p>
Join a keynote with Oliver Sack about music in medical treatment
</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
and the CSS is as follows (I have a reset CSS but I don't think that the issue, I've been working on other sections of the code just fine and it's the basic meyerweb reset that does not instruct otherwise of obstruct in any other way:
.mid_content {
display: flex;
width: 100%;
margin-top: 2rem;
}
.box_1 {
display: flex;
width: 60%;
flex-flow: column wrap;
}
.box_1 img {
width: 100%;
height: auto;
padding: 0 1.5rem 2rem 1.5rem;
}
.box_2 {
display: flex;
width: 40%;
flex-flow: column;
}
.box_2 img {
width: 30%;
height: auto;
padding: 1rem;
}
.box_2_1 {
display: flex;
align-items: center;
}
.box_2_1 img {
padding-top: 0;
}
.box_2_2 {
display: flex;
align-items: center;
}
.box_2_3 {
display: flex;
align-items: center;
}
Also, new here, so if there is a better way to paste my code here please let me know.
There are many minor issues in your UI but addressing main one which is content on left and right does not align properly and cause of it is padding: 0 1.5rem 2rem 1.5rem;. To fix that move padding: 0 1.5rem 2rem 1.5rem; from box_1 img to box_1.
Below is working example and if you struggling with any other issue do share.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
}
.mainDiv {
color: white;
width: 100%;
height: 100vh;
background-color: #1e1e1e;
display: flex;
align-items: center;
justify-content: center;
}
.mid_content {
display: flex;
width: 100%;
margin-top: 2rem;
}
.box_1 {
display: flex;
width: 60%;
flex-flow: column wrap;
padding: 0 1.5rem 2rem 1.5rem;
}
.box_1 img {
width: 100%;
height: auto;
}
.box_2 {
display: flex;
width: 40%;
flex-flow: column;
}
.box_2 img {
width: 30%;
height: auto;
padding: 1rem;
}
.box_2_1, .box_2_2,.box_2_3 {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="mid_content">
<div class="box_1">
<img
src="https://images.pexels.com/photos/7307621/pexels-photo-7307621.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Man in a white sweater reading a book"
/>
<h2>It doesn't hurt to keep practicing.</h2>
<p>
"Curabitur vitae libero in ipsum portitor consequat. Aliquam et
commodo lectus, nec consequat neque. Sed non accumsan urna.
Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur
dolor consequat, tristique ligula.
</p>
<br />
<br />
<footer>Emanuel, Sr Strategist at Hiring-com</footer>
</div>
<div class="box_2">
<div class="box_2_1">
<img
src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Birdseye view of people walking "
/>
<div class="asidetext">
<h3>Orientation Date</h3>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_2">
<img
src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Study room with a map of South America on the wall"
/>
<div class="asidetext">
<h3>Our Campus</h3>
<p>Find which campus is close by you</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_3">
<img
src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Bearded guy older goy wearing glases and a hat turning back"
/>
<div class="asidetext">
<h3>Our guest lecture</h3>
<p>
Join a keynote with Oliver Sack about music in medical treatment
</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>