Questions tagged [clearfix]

A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

Filter by
Sorted by
Tagged with
1 vote
5 answers
98 views

Button sticking out of form

I have a form that looks like this: Removing the mb-3 class does nothing to help, it just removes the spaces between the inputs. How am I supposed to ensure the button stays within the blue box? &...
Ryolu's user avatar
  • 523
0 votes
1 answer
58 views

Jquery how to find floating elements in DOM?

Jquery how to find floating elements in DOM? float: left/right Clearfix is related to element float. That is not needed in our case. How to find which elements floating in DOM?
eastwater's user avatar
  • 4,792
0 votes
2 answers
33 views

Height not actually changing hieght while floating

Right now I'm coding a menu that has a two column layout. This is the code. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
Ship's user avatar
  • 3
-1 votes
1 answer
76 views

Css ::after NOT displaying on same line for link text as applied using Twig

The problem: I’m trying to automate adding something to the end of the link text on a Drupal 8 site that uses twig with the ::after CSS function. Something like: &::after { content: '!!!!'...
OMGwtfYes's user avatar
1 vote
1 answer
421 views

How do I remove clearfix from woocommerce shortcutcode

I am using wordpress and I just pasted woocommerce products shortcut code. So, I want to know how do I remove clearfix div from woocommerce shortcutcode or HTML, any ideas? As you can see the ...
jeet singh's user avatar
-1 votes
1 answer
61 views

Why are the elements with .clearfix class collapsing?

Why are the elements with the class .clearfix still collapsing and they have no height. the clearfix should solve it i thought. the class .clearfix is found under /GENERELLES/ i tried everything but i ...
No Body's user avatar
0 votes
1 answer
218 views

Why is my media query putting elements out of their container?

Hello Community: I am learning GridSystems right now. I made 2 media queries depending on the screen size: the first one is for 768px the second one is for 480px. but when i adapt the screen size, the ...
No Body's user avatar
0 votes
1 answer
8k views

Responsive Media Card Image on left, text on right

Here's the my current code in jsfiddle: <div class="card-container"> <div class="float-layout"> <div class="card-image"> <img src="...
dev1791456's user avatar
1 vote
0 answers
31 views

after applying clearfix hack to figure tag, the figcaption gets excluded and goes out of the figure

@media(min-width: 1071) { .align-left { float: left; width: 100%; margin: auto; max-height: 350 ; max-width: 450 ; } ...
Amaan Shaikh 's user avatar
0 votes
0 answers
18 views

Why does an empty block exists whereas an empty inline does not? [duplicate]

I was learning about floats and clearfix. So if all the elements of a container are floats then the container shrinks, and to have height, container must have a non-float element. So when an empty ...
Yogesh Bhatt's user avatar
1 vote
1 answer
404 views

ACF Repeater Fields & Clearfix / Styling when displaying

First time posting, been using these forums as a resource for a while though... Hoping you can help. I’m scratching my head on a PHP thing & wondered if you might have any ideas Here’s the ...
Gordon Spider's user avatar
0 votes
4 answers
86 views

Element widths not aligning themselves properly

I'm really struggling here trying to figure out what is going on. I have an HTML with a header, a sidebar, and a central content page. The sidebar and central content are in the same div, which also ...
Dasphillipbrau's user avatar
0 votes
3 answers
231 views

How to use "clearfix" css in nested blocks?

I'd found, that css "clearfix" example not work properly when there are nested float:left blocks. Here is an example: .left { float: left; width: 100px; height: 200px; background: ...
eurobax's user avatar
-1 votes
1 answer
190 views

Header stuck in nav bar.Where I need to put clearfix?

When I added background image in .header the image stuck inside the navbar.Notice that comes before in HTML.I don't know where should I use clearfix or maybe it is not the problem. <!DOCTYPE ...
Breik's user avatar
  • 1
0 votes
1 answer
681 views

How to Add Margin to Relative Div Overflowing Parent to Move Content Down

I have created a div that overlaps its parent, and the margins after the div are not behaving as expected. I expect the content following the div to appear after the overlowing div, but it's not. ...
Gregory Potts's user avatar
0 votes
1 answer
876 views

CSS Clear Float not working with Media Queries

I'm trying to clear two elements from floating, but it's not working and I can't figure out why. The answer is probably (literally) right before my eyes. It may have to do with my Media Queries or ...
Cinder's user avatar
  • 329
0 votes
1 answer
206 views

bootstrap clearfix not working. Holes in layout chrome

Hey guys I created my own custom cards in bootstrap 3 as I need to support rather old browsers and cant yet upgrade to bootstrap four. The cards have a video in them. a title and a button. Heres the ...
codernoob6's user avatar
-1 votes
1 answer
24 views

Outer div won't expand when slide-in menu height changes

Can anyone help me out with this? I've tried clear fix and a number of other things but cannot figure out why the container column (center one) which contains the slide-in navigation menu won't auto ...
Gerd's user avatar
  • 89
0 votes
1 answer
52 views

Floats not working, Second Background Image not registering as a background, Centering things?

So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university. I'm trying to ...
Sydney Lush's user avatar
0 votes
0 answers
21 views

Attribute selector in clearfix implementation?

I came across the clearfix implementation below. What could be the reason for the choice of the attribute selector (div[class="foobar"])? I cannot figure out any good reason for it. Why didn't the ...
pogopaule's user avatar
  • 1,533
3 votes
7 answers
1k views

Bootstrap grid is not correctly aligning

On my search results page I have 2 posts per row (col-md-6). The grid works fine and everything is aligned correctly, except when the excerpt or the post title is longer than the other excerpts or ...
user6738171's user avatar
  • 1,009
2 votes
3 answers
1k views

float-css overlaps next to div image

My logo and navigation float to the left and right respectively when the screen gets to 40rem. However it overlaps with the next div which contains a background image. I tried setting margins but that ...
ankit's user avatar
  • 125
1 vote
0 answers
305 views

Clearfix on blogger widget

I recently added a new widget on my blog, but it seems that a line document.write('<li class="clearfix">');if(showpostthumbnails==true) causes some extra empty space under the link. Deleting ...
user3238715's user avatar
0 votes
3 answers
155 views

How can i override previous styling in a wordpress theme?

Ok, this is the styling I want to be used .suggestion-taxonomies-product-visibility span { display: inline-block; float: left; padding-left: 10px; } The usual of mentioning ...
MittenMits's user avatar
1 vote
2 answers
1k views

Overlapping sections, the content of section goes beyond this section

I have problem: first section - header is attachment fixed, and when I reduce the browser window, the background only covers a small portion of the section, the rest of the content is under another ...
Tubaris's user avatar
  • 11
0 votes
1 answer
49 views

Div don't stack without additional clearfix in bootstrap

I am relatively new to bootstrap and created a first main page with a big jumbotron and 3 horizontally aligned columns below. All include one image and text below. See code here: <div class="...
Chris's user avatar
  • 13
2 votes
1 answer
118 views

How to correctly add in a row to bootstrap to fix grid system moving onto multiple lines

I am using bootstrap to display the posts on my front page. I have my posts alternate between 2 rows of 3 posts and 1 large post. Everything looked good except for the fact that I noticed that if ...
user6738171's user avatar
  • 1,009
0 votes
0 answers
41 views

Clearfix doesn't work when I want multiple images superposing

I want 3 images on top of each other (so i can switch between them with the slider). I use the relative/absolute technique. Strangely, the result is floating outside the div (see the picture below). ...
fransua's user avatar
  • 29
0 votes
2 answers
1k views

CSS Float content creating whitespace and overlapping other div

I'm in the midst of creating a responsive portfolio at the moment and I'm running into a bit of trouble. Before a certain breakpoint (css media query), the second and third paragraph in the 'About' ...
WebDevKid's user avatar
0 votes
1 answer
3k views

CSS clearfix doesn't seem to work

I'm trying to use clearfix instead of clear both, but it doesn't work for some reason. I did everything as the tutorials. What should I do to make it work? * { margin: 0; ...
Ahmadz Issa's user avatar
0 votes
1 answer
2k views

Add condition ngFor outside loop

I want to add a div with class clearfix but I need to add it outside the loop. Is any way to achieve that? <div class="row"> <div class="col-xs-12 col-md-3 item" *ngFor="let item of items;...
cor's user avatar
  • 3,343
0 votes
2 answers
288 views

Make a div adjust its height to its absolutely positioned children

I have a div element (default positioning) containing and h1 and a link, both of which have absolute positioning. Naturally, the div elements height collapses. How do I make the div element adjust its ...
Lukeception's user avatar
0 votes
0 answers
55 views

Firefox Float: Post Feed Overlapping Header Image

I'm having this strange issue on a website I'm working on using a modified Wordpress Twenty Sixteen theme: http://olderbeast.com/ It looks fine on Chrome and Opera, but on Firefox and Edge the blog ...
Spencer Moore's user avatar
0 votes
1 answer
578 views

Is it possible to overwrite a clearfix with a <hr />?

Currently, I have a clearfix wrapped around a large body of content. I have multiple sets of images on the left and text on the right with a <hr /> under each. The only issue is that sometimes I ...
jonbon's user avatar
  • 1,152
0 votes
1 answer
1k views

100% height div disappears

I am attempting a liquid web design that includes a shadow on the outside of the content box. This cal all be seen here: http://mikesidelka.com/2/ So I attempted to do this, by having the content ...
Mike Sidelka's user avatar
0 votes
1 answer
195 views

Clearfix not working on div with video in it

I have tried a lot of different types of clearfixes but none are working. I am trying to make a full-width video header that has text infront of it, but you can scroll down past it as well. This is ...
georgej's user avatar
  • 3,081
0 votes
1 answer
436 views

Clearfix not working with a fixed width column

I am new to Bootstrap and I am having a problem with clearfix. I am trying to design a website with 3 content columns (of variable height) and a 4th column with a fixed width for advertising. <...
Ricardo's user avatar
3 votes
1 answer
203 views

Nested clearfix with fluid width contents

Consider this case: There is a layout with fluid width content, and fixed sidebar floated to the right. Container of said layout is using clearfix to clear right float Inside the content block there ...
Max's user avatar
  • 1,169
0 votes
1 answer
488 views

Is it safe to apply "clear: both;" to .clearfix::before?

.clearfix::before, .clearfix::after { content: ""; display: block; clear: both; } I think the clearfix method above is both compact and safe. However, I realised that if this method is as good ...
nalzok's user avatar
  • 15.2k
0 votes
0 answers
35 views

Extra text raising containing box

It's just weird: When there is only some text, .main is pushed down. (The reason is demonstrated here.) When there is lots of text, the first few words of .main appears between two floating boxes. ...
nalzok's user avatar
  • 15.2k
2 votes
1 answer
136 views

Why top margins are collapsing but bottom margins are not?

As you can see in the following demo, in left-column, the upper padding edge of .clearfix-using_display-table(yellow part) and that of .clearfix-using_display-table p(silver part) touch each other. ...
nalzok's user avatar
  • 15.2k
3 votes
2 answers
2k views

display: block; VS display: table;

I can't spot the difference between display: block; and display: table;. For example, when writing clearfix, the following two CSS rule seems to behaviour identical: Using display: block; ....
nalzok's user avatar
  • 15.2k
0 votes
1 answer
62 views

SMARTY forach and adding new clearfix element braking lines

I have code: {foreach from=$liconteiners item=lconteiner name=sld} <li class="liconteiner col-sm-3">text</li> {/foreach} and this is give me something like this: <li class="...
Agnes Tom's user avatar
  • 356
1 vote
1 answer
54 views

Where to apply clearfix(es)? [closed]

Top margin of first card is result of float: right applied on button. If I remove that right float, top margin appears above second card. What's proper way to fix this? Where to apply clearfix(es)? ...
ridjis's user avatar
  • 55
1 vote
0 answers
87 views

Yii2 clearfix.less not populating in production environment

I designed a website using Yii2, and while I have done many, this problem only appears on one of them due to some reason that I cannot determine. The views from dektrium\yii2-user extension show up ...
Shahid Thaika's user avatar
-6 votes
3 answers
90 views

i need an answer please : bootstrap 3 this is for a job applyment?

In order to get a job , the recruitement ask me to solve this problem in order to get the job ! Here the html of the question : <div id="header" class="col-md-12">header</div> <...
ls.94's user avatar
  • 17
1 vote
1 answer
5k views

CSS floating element break to next line

I've come to the condition like this: HTML <div class="outer clearfix"> <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> <div class="two"&...
Ashish's user avatar
  • 323
0 votes
1 answer
719 views

Floating elements above clearfixed element

I came across this really interesting thing. Was messing around with floats and clearfix. I have a section (container) which contains 3 left floated div boxes and to avoid container collapsing, I use ...
Limpuls's user avatar
  • 876
4 votes
0 answers
216 views

Unknown offset. (inline-flex element + clearfix) [duplicate]

Unknown offset. In latest Chrome, FF, IE Explain please, what the top offset (1em) ? JSFiddle #a { border:1px solid blue; } #b { display: -webkit-inline-box; display: -webkit-...
Alvego's user avatar
  • 346
1 vote
1 answer
183 views

Is it safe to update ::before and ::after clearfix to a simple ::after one?

At present, a framework I work with utilises the classic clearfix: @mixin clearfix { zoom: 1; &::before, &::after { content: ''; display: table; } &::...
langauld's user avatar

1
2 3 4 5