Float in CSS affect the containing divs - html

Question

I'm practicing with HTML/CSS using Bootstrap v5.0 and there are some problems with the strange reactions between floats and divs. Particularly, I want to achieve something as below:
And I succeeded by applying the following piece of code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<div class="center-div new-page">
<div class="row g-3 d-flex d-md-block">
<div class="col-lg-6 col-md-12 float-end">
<div class="third-slogan">
<h2 class="d-none d-md-block">Perfect for Operations HR and Finance</h2>
<h2 class="d-block d-md-none">OpenType features and Variable fonts</h2>
<p class="sub-slogan">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way to plan<br>their schedule.</p>
</div>
</div>
<div class="col-lg-6 col-md-12 float-start">
<div class="screen3"><img src="https://via.placeholder.com/300x100" alt="Screen 3"></div>
</div>
<div class="col-lg-6 col-md-12 center-div float-end">
<div class="buttons-page-3">
<button id="button-button" class="btn btn-rounded btn-couple-2" style="color: #FFFFFF; background-color: #03D6F3; margin-top: 0;">
Button
</button>
</div>
</div>
</div>
</div>
</div>
My custom CSS:
.new-page {
margin-top: 10%;
}
.center-div {
text-align: center;
}
.third-slogan {
margin-top: 18%;
padding-right: 10%;
padding-left: 10%;
}
.third-slogan h2, p {
text-align: left;
}
.sub-slogan {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2px;
color: #5C5C5C;
margin-top: 10%;
}
.screen3 img {
width: 85%;
}
.buttons-page-3 {
text-align: left;
padding-left: 10%;
}
.btn-rounded {
border-radius: 39px;
font-size: 16px;
padding-top: 18px;
padding-bottom: 18px;
padding-left: 46px;
padding-right: 46px;
}
.btn-couple-2 {
margin-top: 5%;
box-shadow: 0px 4px 31px rgba(0, 0, 0, 0.15);
margin-right: 3%
}
But the problem is, after I apply the 2 float-end for the text and the button, and 1 float-start for the image, the divs which contains them does not display properly:
And it cause me a lot of troubles to continue to work with the divs after that. Could anyone please explain why this happens and how to fix it? Thank you very much.
P/s: The divs return to normal if I remove the float of the image or the button, but then it would not display as I desire, the button is pushed below the image.

Answer 1

The div around the button, which is the third div in the .row element is redundant and messes this up. This layout should have 2 columns (col-*) and the button should be inside of the second column. Title, intro text and button should be block elements without any floats, so they will stack on top of each other like your design mockup.
I have removed redundant html markup and cleaned up the CSS in order to let Bootstrap do most of the job for you: https://jsfiddle.net/3johtdxk/3/
EDIT: OP wants responsivity for mobile with text and heading above the image, and button below. Added second button in markup so we can hide/display them depending on the viewport width.
.new-page {
margin-top: 10%;
}
.sub-slogan {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2px;
color: #5C5C5C;
margin-top: 1.4rem;
}
.full-width {
display: block;
width: 100%;
}
.btn-rounded {
border-radius: 39px;
font-size: 16px;
padding-top: 18px;
padding-bottom: 18px;
padding-left: 46px;
padding-right: 46px;
}
.btn-couple-2 {
margin-top: 5%;
box-shadow: 0px 4px 31px rgba(0, 0, 0, 0.15);
margin-right: 3%
}
#media (max-width: 768px) {
.stack-order-mobile {
flex-direction: column-reverse;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<div class="new-page">
<div class="row g-3 stack-order-mobile">
<div class="col-lg-6 col-md-12">
<img class="full-width" src="https://via.placeholder.com/1000x600" alt="Screen 3">
<button id="mobile-button" class="btn btn-rounded btn-couple-2 d-block d-md-none d-lg-none d-xl-none mt-2" style="color: #FFFFFF; background-color: #03D6F3;">
Button
</button>
</div>
<div class="col-lg-6 col-md-12">
<h2>Perfect for Operations HR and Finance</h2>
<p class="sub-slogan">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way to plan<br>their schedule.</p>
<button id="desktop-button" class="btn btn-rounded btn-couple-2 d-none d-md-block d-lg-block d-xl-block" style="color: #FFFFFF; background-color: #03D6F3; margin-top: 0;">
Button
</button>
</div>
</div>
</div>
</div>
Note that when I removed floats I had to switch the order of the columns so that your image still stays on the left side. To get your desired stacking order, I added an extra button with hide/show classes from bootstrap at 768px and a media query for viewports <768px to move your text to the top on smaller screens.
The media query could probably be done with a Bootstrap utility, but I don't know it well enough. You have to reduce your whole browser window to less than 768px to see the stacking result as neither stackoverflow nor jsfiddle editors aren't great with responsiveness.
Added a larger image with 100% width so it fills up its left column completely. You may need to introduce some right padding/margin or reduce the image with percentage.
You had added a flex class in there that was redundant. Bootstrap columns ARE flex containers from the outset, so I removed it.
Remember: Always use as little CSS as possible! This is true also with Bootstrap. Don't load it up with a lot of stuff until you know what is going on. Try little by little and keep your markup lean. No need for extra divs around elements like img in most cases.
The issue of floats is another one, you don't need any floats here. Floats for responsivity is bad now that we have flex which is a cleaner solution. I removed them all. You may need them if/when you try to float the Invision, Marvel etc. divs in the element context in the left column.
But it looks like you're planning to use an image here, so no floats needed then. Try to stick with bootstrap columns only (less code, less mess).