The presence of floats in CSS influence the surrounding div elements

Currently experimenting with HTML/CSS utilizing Bootstrap v5.0 and encountering issues with the unusual interactions between floats and divs. Specifically, aiming to achieve the following: https://i.sstatic.net/4lpC2.png

Successfully achieved the desired outcome by implementing the following code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239263927">[email protected]</a>/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>

Applied 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%
}

Encountering issues as the divs containing the floated elements (text, image, button) do not display correctly: https://i.sstatic.net/9luSV.png https://i.sstatic.net/D3no6.png https://i.sstatic.net/1bpDP.png

This poses challenges in working with the divs thereafter. Seeking insights on why this occurs and possible solutions to rectify it. Your assistance is highly appreciated.

P/s: Removing the float property on the image or button resolves the issue, but alters the desired layout where the button is positioned below the image.

htmlcssbootstrap-5

Answer №1

The third div in the .row element enclosing the button is unnecessary and disrupts the layout. This design should consist of 2 columns (col-*) with the button placed within the second column. The title, introductory text, and button should be block elements without any floats, ensuring that they stack vertically according to your design mockup.

To simplify the code and optimize responsiveness, I have eliminated redundant HTML markup and streamlined the CSS to leverage the capabilities of Bootstrap. You can view the updated version here: https://jsfiddle.net/3johtdxk/3/

UPDATE: The original poster (OP) requested a mobile-responsive layout with text and heading above the image, and the button below it. I included a second button in the markup to toggle visibility based on 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dec1df">[email protected]</a>/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>

It was necessary to change the column order to ensure that the image remains on the left side while maintaining the desired stacking order. An extra button was included with Bootstrap's hide/show classes for viewports under 768px, and a media query was applied to reposition the text for smaller screens.

The stacking results can be best viewed by resizing your browser window to less than 768px due to limitations in responsiveness of stackoverflow and jsfiddle editors.

A larger image with full width was added to fill the left column completely. Adjustments may be needed for padding/margin or image sizing.

The unnecessary flex class was removed as Bootstrap columns are inherently flex containers. Avoid unnecessary CSS and instead leverage Bootstrap columns for cleaner and more efficient code.

Remember: Keep your CSS minimal and utilize Bootstrap features effectively. Avoid unnecessary floats for responsiveness and focus on utilizing Bootstrap columns for a cleaner code structure. Only use floats as needed, such as for positioning additional divs within the left column.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Repurpose the identical popup window

I am searching for a solution to use the same pop-up window whenever it is called. Currently, I need to submit a form into a pop-up window and it works well, except in Chrome iOS where each form submission opens a new tab/window instead of reusing the prev ...

javascripthtmljsfiddle

Utilize flexbox to make two elements on the same line

Is it feasible to have two elements on the same line when aligning a series of elements with flexbox? Consider this scenario: .outer { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 50px; } .outer .inner ...

cssflexbox

The data-tooltip feature displays information as [Object object]

There seems to be an issue with displaying text in the data-tooltip. Instead of showing the intended message, it is displaying [Object object]. import React from "react"; import { FormattedMessage } from "react-intl"; const translate = (id, value={}) = ...

javascripthtmlreactjswebjsx

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

What is the correct way to send parameters in the action tag?

Can I set the res variable as the form action in HTML? <script> var name =$("#name").val(); var file =$("#file").val(); var res= localhost:8080 + "/test/reg?&name="+name+"&file=" +file ; </script> <form acti ...

javascriptjqueryhtmlforms

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

How to change the file name of an HTML page in a website template?

After downloading a free dashboard website template from the internet, I've been trying to incorporate it into my own website. My main focus now is on creating a navbar that opens the relevant page upon clicking. To do this, I duplicated the html fi ...

htmlcsstemplatesbootstrap-5dashboard

What is the reason behind the changes in the CSS rendering behavior of Fieldset legends over the past few months?

A form on my website contains nested <fieldset> elements, each with a unique <legend>. Recently, I discovered an issue with the page rendering on various browsers (Chrome, Firefox, Opera) that was not present before. One element, <span clas ...

htmlcssfieldset

HTML Remover resulting in a malfunction

Currently in the process of removing HTML tags from text using the following method: <p><b>Masala</b> films of <a href="/wiki/Cinema_of_India" title="Cinema of India">Indian cinema</a> are those that combine different genres ...

pythonhtmlstripping

Emphasize Expandable Sections based on Search Term

I have been working on developing an HTML page for my company that will showcase a list of contacts in an "experts list". Currently, the list is structured using collapsible DIVs nested within each other. Additionally, the HTML page features a search func ...

javascriptjqueryhtmlcss

A lateral sliding motion

Here is the HTML code I am working with: <div class="menuTabs"> <div class="mtabArrowLeft">Left</div> <input class="menutabBTN" name="" type="button" value="a" /> <input class="menutabBTN" name="" type="b ...

javascriptjquerycss

What is the best way to implement a CSS transition in React when the state changes, the component remounts, or it re-rend

Imagine having a React functional component with some basic state: import React, { useState } from 'react' import { makeStyles } from "@material-ui/core" export default function Cart() { const [itemNumber, setItemNumber] = useState ...

cssreactjsmaterial-uicss-transitionsreactcsstransitiongroup

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

javascriptjqueryhtmlcss

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

pythonhtmlpandasbeautifulsoup

Please do not exceed two words in the input field

I need to restrict the input field to only allow up to two words to be entered. It's not about the number of characters, but rather the number of words. Can this restriction be achieved using jQuery Validation? If not, is there a way to implement it u ...

javascriptjqueryhtmljquery-validate

Guide to autoplay an uploaded mp4 video in a flask application

I've been working on a Flask application that includes an upload button for videos in mp4 format. I'm facing an issue where after uploading a video, it only shows a generic grey screen without playing the video. I want to ensure that once a video ...

pythonhtmlvideoflaskmp4

Using `ngRepeat` on a different array of values for repetition

Working with AngularJS. Here is an example of a JSON object: "skills": { "Charisma": {}, "Dexterity": { "Sk3": [ [ true, true, true, true, false ], 44 ] }, ... And the corresponding HTML: <div class="pan ...

javascripthtmlangularjs

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

javascriptjqueryhtmlcss

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

The CSS overflow property does not seem to be functioning properly when applied to a span element that

Here is my current setup: http://jsfiddle.net/YKXUb/1/ My CSS looks like this: .two { height: 100%; width: 100%; border:1px solid green; } .hold { float: left; height: 100%; width: 35%; border:1px solid green; } .right { hei ...

htmlcss