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.
230
questions
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?
&...
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?
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">
&...
-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: '!!!!'...
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 ...
-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 ...
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 ...
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="...
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 ;
}
...
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 ...
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 ...
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 ...
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: ...
-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 ...
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.
...
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 ...
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 ...
-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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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="...
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 ...
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).
...
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' ...
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;
...
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;...
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 ...
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 ...
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 ...
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 ...
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 ...
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.
<...
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 ...
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 ...
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.
...
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. ...
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;
....
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="...
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)?
...
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 ...
-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>
<...
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"&...
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 ...
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-...
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;
}
&::...