The clear fix HTML code doesn't seem to be functioning properly in Google Chrome

Recently, I crafted this basic HTML:

Within this code are 2 SPAN elements.

I intended for one to sit beneath the other by clearing the float.

The bbb element is styled with float:left.

To handle the layout on the aaa element, I utilized Facebook's "clearfix" CSS technique:

 .clearfix:before { content: ""; display: table; }
 .clearfix:after {  content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}

 .clearfix { zoom: 1; }

This approach is proven effective (similar to how Facebook does it) and is elaborated upon in a resource here.

Although it functions properly in FireFox (refer to the image above), Google Chrome (version 24) presents a different outcome.

What element have I overlooked?

htmlcsscss-float

Answer №1

Your jsbin demonstration contains TWO typographical errors and the clearfix code is inaccurately written.

  1. <span class="clearfix"> there is a space before clearfix
  2. <span class='fll'>bbbbb </span>
    single quotes are used instead of double quotes.

Revise your HTML to:

      <div class="clearfix">aaa </div>
      <div class="fll">bbbbb </div>

and adjust your CSS to:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

This will function correctly across all browsers, including IE6-7 http://jsbin.com/ukaxav/19/

Answer №2

.clear-fix:after { content: ""; display: table; clear: both; }

Isn't it much tidier?

Answer №3

Add the display:inline-block; property to the parent div element.

Example Code:

<div style="height: 100%; border: 1px solid blue;display: inline-block;"> 
<span class=" clearfix" style="">aaa </span>
<span class="fll">bbbbb </span>
</div>

Answer №4

The Clearfix attribute is designed to resolve float issues by applying it to an element that has floats within it, not to clear previous ones. It seems like in your case, the Clearfix may not be placed correctly or there might be a misunderstanding of its purpose.

Answer №5

To make your elements fill the entire width, include width: 100%; in your fll class.

Here is an example:

.clearfix:before {
    content: "";
    display: table; }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }

.clearfix { zoom: 1; }

.fll
{
    float:left;
    width: 100%;
}

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

Which design pattern should I implement to update all table rows except the initial one, while incorporating an AJAX insertion mode?

I am working with a table structure that is dynamic based on search results. The table consists of different rows including titles for categories like Organization, Category, and File. <table class="table-striped col-lg-12" id="results"> <tr& ...

c#htmlajaxasp.net-mvcrazor

Choosing items in CSS

Here is a piece of HTML code to work with: <body> <pre class="typescript"> <span class="classDecl"> <span class="statement">export</span> <span class="keyword">class</span> ...

javascripthtmlcss

The left-floated image extends beyond the boundaries of the div

I have a situation where text and an image are combined but the cat image goes outside of the parent div. Is there a solution to this issue? View the code here <div style="border:1px solid #CCCCCC"> <img style="float: left;" src="http://plac ...

htmlcss

Issues with html5 dropdown menu not displaying properly when hovered over

As a beginner in programming, I have been tasked with creating a website using HTML5 and CSS. The main issue I am encountering is with my horizontal menu bar that has vertical sub-menus appearing on hover. The menu consists of 3 main tabs: Home, Health, a ...

csshtml

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

jqueryhtmlcssinternet-explorer-9

Is it possible to save the location of a draggable box using CSS3?

I'm trying to figure out how to store the position of a box in a fluid sortable row. Essentially, I want the position to be remembered when a user drags a box from category 1 to category 2, even after refreshing the page. Below is the HTML code for t ...

phpjqueryhtmlcss

Approach needed to assign identical CSS property to various classes that are dynamically created via ngFor in Angular?

I am currently working on writing CSS for dynamically generated classes. I have set up the classes using ngFor as shown below: <div style="max-height: 450px;" *ngFor="let item of data; let i = index" class="card{{i + 1}}"> ..... </div> Now, I ...

cssangular

Connecting a string array to the navigation bar

Need Assistance with AngularJS: In my controller, I have a string array that looks like this: var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.menuitems =['Home','About&apos ...

javascriptcssangularjshtmlasp.net-web-api

Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height. Solu ...

javascripthtmljquerycssbootstrap-4

Similar to using `display:flex` and `justify-content: center`, you can achieve centered

I have a group of n children within a div. I want to arrange them in a single row and center them horizontally. If I were to use flexbox, I could achieve this by: display: flex; justify-content: center; Is there a way to accomplish the same layout using ...

cssflexboxgrid-layout

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

Reverse the impact of the preceding CSS directive

In this screenshot example, the padding at the bottom in Material-UI has been increased from 16px to 24px using the CSS rule below: .MuiCardContent-root:last-child { padding-bottom: 24px; } https://i.sstatic.net/IWaIu.png I want to revert it back to ...

cssreactjsmaterial-ui

Angular 7 compile error NG8002: Unable to bind object as it is not recognized as a valid property

Currently working on an Angular 7/8 test App. Encountering a compile error Can't bind 'discounter' since it isn't a known property of 'paDiscountEditor' The HTML where the error is occurring is simple... Below are all the nec ...

htmlangulartypescriptcompiler-errors

Find the element that is being scrolled in order to delete its attributes

Issue with the sidebar causing whitespace on mobile devices, and scroll properties need to be removed. When expanding the sidebar, white space appears below it. Various display modes have been tried, but they all push elements below instead of keeping th ...

javascripthtmljquerycssangular

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

What is the ideal event for a slider (range) to trigger in order to function effectively?

After converting my input into a slider, I noticed a strange behavior with the (click) event in Angular. When dragging the slider and releasing it without the mouse pointer hovering over the slider, the onStart() method does not execute. I experimented wi ...

htmlcssangulardom-events

What strategies can be implemented to increase the number of backlinks?

<script type="text/javascript"> $(document).ready(function() { var linkas = $("#button").attr("value"); $('#button').click(function(){ $.get(linkas, function(data){ $(' ...

jquerybuttonhtmlhyperlink

JavaScript: Selecting parent elements using getElementsByClassName

I am dealing with the following HTML code: <div class="item"> <img class="item-image" src="${item.getImage()}"/> <p>${item.getName()}</p> </div> and JavaScript: var classname = document.getElementsByClassName("item" ...

javascripthtmlcss

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

javascripthtmlcss

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

javascripthtmldjangofile