Position right and left gets merged in DIV in CSS - html

Question

Trying to align my website! But when the screen is half screen, both left and right elements get merged.
I want them to be one below the other with the left element first and the right element 2nd.
#media only screen and (max-width:400px) {
.about-right,
.about-left {
float:none;
width:100%;
padding-left: 25px;
padding-right: 25px;
}
Full screen
Half screen
The half screen is the default mobile view as well. Please help.
Code for my full screen:
`#media only screen and (max-width:1024px) {
.about-profile {
padding-right: 5rem;
}
.about-services {
padding-left: 5rem;
}
#media only screen and (max-width:900px) {
.about-profile {
padding-right: 4rem;
}
.about-services {
padding-left: 4rem;
}
After the 1st answer by #fevid
After edit
HTML Code:
<section id="about">
<div class="about-profile-bg"></div>
<div class="about-wrap">
<div class="about-profile">
<div class="about-profile-bg"></div>
<div class="about-services"> </div>
The profile = right and services = left.
I've used CSS in using and styling the left and right side.
.about-profile{
float: right;
width: 50%;
padding-left: 20px;
padding-right: 20px;
}
.about-services {
float:left;
width: 50%;
padding-left: 20px;
padding-right: 20px;
}
.about-services-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/profile-bg.jpg);
background-color: #615e5e;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 1;
.about-profile-bg {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#aaa7a3;
width: 50%;
background-image: url(../images/service-bg.jpeg);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: .80;
}

Answer 1

don't use float, use flex instead, in smaller screen change flex-direction to column.
presuming your parent container has .about class:
#media only screen and (min-width:401px) {
.about {
display: flex;
justify-content: space-between;
}
}
#media only screen and (max-width:400px) {
.about {
display: flex;
flex-direction: column:
}
}

Answer 2

It depends on what you want the page to look like if the text is longer than the image.
If you want it to wrap under the img if it is longer then it is correct to use float: left on the img (that's what float was designed for) but remove the div float: right on the text. Then as the viewport goes below your limit, setting width 100% will ensure the img is above the text. See this snippet:
body {
font-size: 30px; /* just to demo the wrapping round */
}
.about-right,
.about-left {
width: 45%;
}
.about-right {
float: right;
}
.about-left {
float: left;
margin-right: 10px;
}
#media (max-width:400px) {
.about-right,
.about-left {
rfloat:none;
rclear: both;
width:100%;
padding-left: 25px;
padding-right: 25px;
}
}
<img src="https://picsum.photos/id/1015/200/300" class="about-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
If you want the text to remain on the right then you can use the structure you already have. Increasing the widths to 100% on narrower viewports will force the text div below the image. See this snippet:
body {
font-size: 30px; /* just to demo the wrapping round */
}
.about-right,
.about-left {
width: 45%;
}
.about-right {
float: right;
}
.about-left {
float: left;
margin-right: 10px;
}
#media (max-width:400px) {
.about-right,
.about-left {
width:100%;
padding-left: 25px;
padding-right: 25px;
}
}
<img src="https://picsum.photos/id/1015/200/300" class="about-left">
<div class="about-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Make sure you have the closing bracket on the media statement.
However, you may like to investigate other methods, particularly grid and flex, as float is really just for the first example here, when you want the text to float around the img.