HTML CSS : put flexbox elements next to each other - html

Question

I'm working on a project where I have to create an online bookstore webpage using only HTML and CSS . I want to display "about us" information for the shop using a style like in the image below :
Basically I want to put an image and a text in the way displayed above . Using flexbox however I have trouble syncing the image and the text I have because I have difficulties setting the image width to cover half the flex container and the part of my text the other half .
This is my code :
.flex-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
background-color: orange;
opacity: 0.7;
}
.flex-container>div {
margin: 0;
width: 100%;
height: auto;
}
#fleximg>img {
width: 60%;
height: auto;
}
#about {
width: 50%;
margin-right: 300px;
height: auto;
}
<div class="flex-container">
<div id="fleximg"><img src="https://placehold.it/400x400" alt=d esk/></div>
<div id="about">
<!-- text i want to place next to image -->
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
When i run my page I get the picture below where the image and the text are not next to each other and I have trouble readjusting their sizes
I would appreciate your help with guiding me to solve my problem

Answer 1

First, if the image height is taller than the right-col content - even simple width: 100%; height: auto for the image could work.
div{
border: 2px solid black;
}
#fleximg img{
width: 100%;
height: auto;
vertical-align: middle;
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
}
#about {
flex-basis: 60%;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
tall image
<img src="https://placehold.it/400x700" alt=d esk/>
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
</div>
</div>
</div>
But the idea above it less useful for dynamic sites.
More responsive approaches:
By background image
For the "left-col" Use background-image and background-size: cover.
div{
border: 2px solid black;a
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
background-image: url("https://picsum.photos/1111/1300");
background-repeat: no-repeat;
background-size: cover
}
#about {
flex-basis: 60%;
padding: 100px 10px;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
</div>
By image element
Without using background-image for the left-col this idea is more "tricky".
For img element - One idea/solution is to use this "trick":
https://css-tricks.com/aspect-ratio-boxes/
Set image col "parent" position to relative and put inside an absolute image (100% width/height + object-fit: cover).
div{
border: 2px solid black;
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
top-padding: 100%;
position: relative;
}
#fleximg > img {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover ;
}
#about {
flex-basis: 60%;
padding: 100px 10px;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
<img src="https://placehold.it/400x400" alt=d esk/>
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
</div>
Important: From the design aspect - There is no magic solution to suit all situations. It also depends on the amount of content (text/images and so on) you place in the right "content" column and the width of the screen (min-width/height/padding/margin and Media query useful her).

Answer 2

You should set css class flex-container is width: 100% and #fleximg is width:50%, #about is width:50% and use the background in css instead for img tag.
Example:
.flex-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
background-color: orange;
opacity: 0.7;
width: 100%;
height: auto;
};
#fleximg {
width: 50%;
height: auto;
background: url('') center no-repeat;
background-size: cover;
};
#about {
width: 50%;
margin-right: 0;
height: auto;
};