Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid.

While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox.

I have considered using absolute positioning for the logo, but I prefer to have the text wrap around the image as it currently does in Chrome.

<div class="card-body" style="max-width: 400px">                            
    <span class="rounded logo-container" style="float:right;max-width: 40%;">
       <div style="height: 60px; width: 80px;background: red" alt="Logo" ></div>
    </span>
    <p class="mb-1 font-weight-bold">ASDASDASDASD</p>
    <div class="container-fluid p-0">
      <div class="row">
        <div class="col" style="max-width: 6em">sadfasdf:</div>
        <div class="col">sdfasdf</div>
      </div>
      <div class="row">
        <div class="col" style="max-width: 6em">safdasdfasdf:</div>
        <div class="col">sdfsadfsadfasdf</div>
      </div>
      <div class="row">
        <div class="col" style="max-width: 6em">sadfasdfsa:</div>
        <div class="col">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
      </div>
    </div>
</div>

Take a look at the fiddle here: https://jsfiddle.net/s2u8y4q0/1/

cssfirefoxbootstrap-4microsoft-edge

Answer №1

To resolve the problem with indentation, consider including the following line in the CSS code section.

.row {margin: 0 -1px;}

Code After Modifications:

<div class="card-body" style="max-width: 400px">                          
    <span class="rounded logo-container" style="float:right;max-width: 40%;">
        <div style="height: 60px; width: 80px;background: red" alt="Logo" ></div>
    </span>

    <div class="container-fluid p-0">
    
        <p style="margin:0 13px;"><b>ASDASDASDASD</b></p>
        
        <div class="row">
        
            <div class="col" style="max-width: 6em">sadfasdf:</div>
            <div class="col">sdfasdf</div>
        </div>
        
        <div class="row">
            <div class="col" style="max-width: 6em">safdasdfasdf:</div>
            <div class="col">sdfsadfsadfasdf</div>
        </div>
        
         <div class="row">
             <div class="col" style="max-width: 6em">sadfasdfsa:</div>
            <div class="col">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
        </div>
      
    </div>
</div>

Updated JSFiddle link

Display in Edge:

https://i.sstatic.net/MbeN0.png

Display in FireFox:

https://i.sstatic.net/B8iQE.png

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

Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax. \class{mathjaxCursor}{\text{_}} ...and here is the accompanying css: .mathjaxCursor { font-weight: bold; background-color: red; } This setup results in the following display: ...

htmlcssmathjax

Enable the bottom footer to expand along with the content to support a dynamically growing page

I followed a tutorial on keeping footers at the bottom of a webpage (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) to create a site with a fixed footer. However, I encountered an issue when there is more content than can fit ...

htmlcss

Generate dynamic lines with evolving hues using CSS3

While working on a fresh web project, I came across the need to emphasize my headers (h1, h2, h3, h4) with underlines. My goal is to have these underlines grow and change color dynamically, similar to what can be seen here: . Is there a way to achieve thi ...

jquerycss

Arranging div blocks in columns that are seamlessly aligned

I am dealing with a situation where I have several boxes or blocks arranged in a 3-column layout. These boxes are styled using properties like float: left, width: 33%, but they have varying heights. Is there a way to make sure that the boxes always fill i ...

jqueryhtmlcssgrid-layout

What is the best way to extract a CSS rule using PHP?

Below is an example of the stylesheet I am currently using: #thing { display: none; } I am looking to retrieve the value of the 'display' property using PHP instead of Javascript. While I know how to do this with Javascript, I would prefer to u ...

phpjavascriptcss

The contents of the div do not display when the button is pressed except in jsfiddle

I have written a script that triggers the appearance of a div where users can adjust the time settings for a timer. The functionality works perfectly on JSFiddle, with the div displaying as intended. However, when tested on other online IDEs such as Coding ...

javascripthtmlcssjsfiddle

Troubleshooting a jQuery Drop-Down Problem

My dropdown menu is not working as expected. I want to show the sub-menu when clicking on an item, and remove the previous sub-menu when clicking or blurring on another menu by removing the drop-down class. However, my current jQuery code does not seem to ...

jqueryhtmlcssclassdrop-down-menu

Alignment issues with Navigation Elements

Recently, while working with the Bulma CSS framework, I encountered an interesting challenge. I wanted to align the navigation buttons to the bottom of the red field, but they appeared to be shifted out of alignment. Despite trying to apply inline CSS styl ...

htmlcsssassbulma

Can a nofollow attribute be added to concealed modal content in Bootstrap?

Query: I am dealing with a situation where I have a significant amount of disclaimer text within a modal on my website. This text is initially hidden (display:none) until a user clicks a button to reveal it. I want to prevent search engines from indexing t ...

htmlcssseo

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

csswordpressmenu

IE encounters an absolute z-index problem when expanding concealed content

I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...

javascriptjqueryhtmlcss

Firefox not receiving output from Headless Selenium/Protractor

The tools and environment I am using for my project setup include: Firefox 30 selenium-server-standalone-2.43.1.jar Xvfb Ubuntu Headless Lineman grunt spec-e2e I have successfully executed Xvfb, Firefox, and lineman grunt spec-e2e wi ...

firefoxseleniumprotractorangularjs-e2elinemanjs

What is the best way to vertically align a container beneath a navbar without triggering the appearance of a scrollbar?

I'm in the process of developing an application using Bootstrap 4. The app features a navigation bar and a container located beneath it. Below you'll find the structure of the application: <body> <div id="root"> ...

htmlcssbootstrap-4

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

Maintaining the aspect ratio of images in Bootstrap Carousel: A complete guide

Using the default carousel from Bootstrap template has been working well for me. However, I've encountered an issue where resizing the browser window distorts the image aspect ratio by squishing it horizontally. I've tried various solutions to m ...

javascripthtmlcsstwitter-bootstrap

Changing the color of an element on click using jQuery's .css() method,

There is a table and I am using fadeToggle on the list to hide and show the table. The background of the list is green color, but I want to change the list color when hiding the table and revert it back to green when clicking to show the table. Unfortunate ...

jquerycss

Mastering the art of utilizing particles.js

Particles.js doesn't seem to be functioning properly for me—I'm struggling to pinpoint the issue. Any guidance or suggestions would be greatly welcomed, as I'm unsure whether it's related to an external dependency... HTML: <div ...

javascripthtmlcssjson

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

Tips for adjusting the CSS left property of a class based on the ID of a tag

I am currently working on setting the left property of a class based on the id of a li tag. The li tags are being dynamically generated as shown below: .js var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; ...

jquerycss

Issue with plotted point labels failing to display correctly on X Range Chart for the initial date of each month - Highcharts

Currently, I am implementing a chart that displays the timeline of activities using an x range. However, I have encountered an issue with the popup displaying data information when hovering over the bars. The problem arises specifically on the first date ...

javascriptc#cssasp.nethighcharts