How can I make this layout responsive? - html

Question

<div class="parentdiv">
<div><img src="img/noimage.png"></div>
<div class="bottom">
<p class="text1">Text1</p>
<div class="btn_area">
Text2
Text3
</div>
</div>
</div>
I've barely managed to make this layout with bunch of floats, margins, tops and lefts but the layout breaks at practically any other screen ratios.
I feel that I shouldn't be spamming float and margins when creating a layout. Are there any better options to build such layout that does not break catastrophically on ratio change?
I've tried googling but what I've found was mostly making asingle div or image responsive which I've succeeded, but can't apply it to my layout.

Answer 1

Try this out and see if you understand whats going on. I will also add a Tutorial for CSS-Flex as a link at the bottom. Make sure that you always post the code you have, that means HTML and CSS for a CSS Question etc. Im just answering directly here cause your Question implies, that you just tried floats. This solution here probably requires you to change some things to perfectly fit, so you can practice a bit with it:
body {
width: 100vw;
height: 100vh;
/*We need a fixed height and width of the parent-Element to make % values work in the child elements*/
}
.parentdiv {
width: 100%;
/*Careful, when your Content inside of this gets close to the maximum width and height of this div you need to change width: 100% or the layout will overflow*/
padding: 25px;
height: 50%;
/*This makes the Element a Flexbox-Element*/
display: flex;
/*sets the direction and the behaviour*/
flex-flow: row nowrap;
}
.left-area {
width: 40%;
display: flex;
flex-flow: row nowrap;
/*the following 2 attributes define where the content is positioned inside the Flexbox-element*/
justify-content: start;
align-items: start;
}
.left-area img {
width: 6rem;
height: 6rem;
/*I used the border to make the Img Look like yours cause i dont have the file*/
border: 1px solid grey;
border-radius: 50%;
}
.text1 {
font-size: 1.5rem;
color: grey;
font-weight: bold;
}
.right-area {
width: 15%;
height: 50%;
display: flex;
/*Column-Reverse means that you have a column but you start at the bottom of it, like it is standing on its head*/
flex-flow: column-reverse nowrap;
}
.btn_area{
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.text2 {
font-size: 1.2rem;
color: #7ad0bc;
font-weight: bold;
}
.text3 {
font-size: 1.2rem;
color: #d96060;
font-weight: bold;
}
<div class="parentdiv">
<div class="left-area">
<img src="img/noimage.png" alt="no image available">
<p class="text1">Text1</p>
</div>
<div class="right-area">
<div class="btn_area">
Text2
Text3
</div>
</div>
</div>
Tutorials for CSS-Flex: Tutorial Help-sheet