Float in CSS affect the containing divs

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.

Note to viewers: The layout is showing a "mobile version" (stacked) in the Run code snippet window because the viewport is so narrow. Open it in a new window to see the full layout. — anatolhiman, Aug 12 '21 at 20:54

anatolhiman · Accepted Answer · 2021-08-12T22:52:28.680

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).

While this may answer the question - you probably should add code to show what you're explaining and show that what you are suggesting works. — disinfor, Aug 12 '21 at 21:01
Oh, for the "float problem" and why I couldn't use block elements for title, intro text and button is that what I'm trying to design is related to responsiveness and reorderring ([link] (https://stackoverflow.com/questions/68757245/reorder-divs-with-responsive-in-bootstrap-5-0/68757479#68757479)). So that's why I need to use float here. For the third .div that messed up, could you show how to fix it? — blank, Aug 12 '21 at 21:03
Good point @disinfor will update the answer with this: https://jsfiddle.net/3johtdxk/ — anatolhiman, Aug 12 '21 at 21:13
@Bell Edited the answer. Check out on a large viewport if this solves your issues. Select "result at bottom" in Jsfiddle settings so you see the columns side by side. — anatolhiman, Aug 12 '21 at 21:17
@anatolhiman Hmm in my original code, i would like the title, intro text and the button to display on the right of the image (the image's height equals the sum of the other threes' heights), and when resize the viewport to be smaller, such as on the mobile phone, the order from top to bottom would be: title-intro text-image-button (as I said, those are my purposes when I use float). I think your code behaves a little bit differently. — blank, Aug 12 '21 at 21:25
Sorry, my edits hadn't saved properly in JSfiddle. Try again now. Should look like this if you use the Bottom Result pane: https://imgur.com/a/tXQDKXB — anatolhiman, Aug 12 '21 at 21:31
@anatolhiman I don't know why but I tried to re-run the code, and refresh the page many times but I still see this: https://imgur.com/a/PzOQYM1 — blank, Aug 12 '21 at 21:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235956/discussion-between-bell-and-anatolhiman). — blank, Aug 12 '21 at 21:44
@anatolhiman please add the code to this question, not just a fiddle. If that fiddle ever disappears or the link is invalid, this answer will become useless to future visitors. — disinfor, Aug 12 '21 at 21:44
@disinfor JSfiddle has been around forever and will not go away anytime soon :) — anatolhiman, Aug 12 '21 at 21:49
@Bell I have updated the fiddle with a new link, see original answer. See more explanations in the chat. — anatolhiman, Aug 12 '21 at 21:52
Regardless, you should include the code in the answer: https://meta.stackexchange.com/questions/192255/policy-on-linking-to-code-sharing-sites-e-g-sqlfiddle-codepad and here: https://meta.stackoverflow.com/questions/334990/i-cant-insert-a-jsfiddle-link-in-my-answer. I'm not concerned with jsfiddle going away, it's the link to your answer that is the concern. That link may disappear. And not only that, if you update your fiddle, the version changes, when you could simply update a stack snippet here without having to change the link to the fiddle. — disinfor, Aug 12 '21 at 21:54

Float in CSS affect the containing divs

1 Answers1