I have recently inherited a large web project. Before taking this on, I had primarily been working with applications, so some of the technology is new to me.
The css has the following class:
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Lots of things all over the website have group as one of their classes. As far as I can see, this is the only bit in the css that references it.
I tried taking away the group class in some places, as it didn't seem to be doing much. However, this caused all kinds of weird things to go wrong - for instance, colour from one element would seem to run on to the next. I don't see why adding a period to the end of the elements is stopping this.
Could anyone elighten me?
Edit: Here is one of the places where the group class is used. If I remove it, so that the div has only the class wrapper, the whole page breaks.
<div id="header">
<div class="wrapper group">
<div class="fl">
myHandle |
features |
about
</div>
<asp:Panel ID="pnlNotLoggedIn" runat="server" cssclass="fr">
sign in |
sign up
</asp:Panel>
</div>
</div>
That's more commonly known as "clearfix" - though "group" is arguably a more semantic class name, if less recognizable.
It's a technique to "clear/contain floats": http://www.ejeliot.com/blog/59
More information on clearfix:
http://www.positioniseverything.net/easyclearing.html
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
What you're seeing is a .clearfix effect using the :after pseudo-class. When the hidden content block is added, the .group element will wrap all it's floated contents, which allows background colors to fill the correct area.
I could be mistaken, but it looks like .group:after is being used as a .clearfix in a way. While it may not seem like it's doing much, it's allowing the page to render correctly, so you should just leave it where it is.
:after is a pseudo-class which allows you to insert content after a selctor. In this case, it's adding a clear fix to properly clear .group which probably has floated content. This can cause the container not to expand to contain all the content. It's a rough equivalent of
<div class="group">
…content here…
<div style="clear:both"></div>
</div>
The advantage of :after is that it doesn't require extra markup.
Also the fact that there is a clear: both; property defined implies that there are floats (e.g. float: right; or float: left;) in common use, and this class is being used to neutralize those.
Related
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
i am having trouble with my new project. i code corectly if i say.
link of the website- which is having problem
This div is giving me tension
<div class="content-bottom"></div>
Edit:
After checking your code, I noticed that you understand the theory of floating and clearing, so I checked a bit more... It seems that you have unclosed </div> somewhere, thus rendering yout div.content-bottom on a different DOM level then after the div.content-middle.
Original answer:
It's because of the floating on your #content and #sidebar
You should use clear:both; for the .content-bottom div.
Read more about clearing and floating here: http://www.quirksmode.org/css/clearing.html
It goes wrong because you float the other elements within <div class="block>`
Set the css property clear: both; on the class content-bottom and it should work.
Just give float: left to .content-bottom class and it will solve your problem..
http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)
You are aware of the age-old problem: Containers containing floated elements don't automatically expand their height to enclose their children.
One approach to fix this is the "clearfix" which adds a number of CSS rules to ensure a container stretches properly.
However, just giving the container overflow: hidden seems to work just as well, and with the same amount of browser compatibility.
According to this guide, both methods are compatible across all browsers that are important today.
Does this mean that "clearfix" is deprecated? Is there any advantage left in using it over overflow: hidden?
There is a very similar question here: What is the different between clearfix hack and overflow:hidden vs overflow:auto?
but the question isn't really answered there.
You can pretty much use overflow: hidden all the time.
But, there are exceptions. Here's an example of one:
Overflowing a container div horizontally but not vertically
The question there was:
There's a fixed height on this: http://jsfiddle.net/je8aS/2/
Without the fixed height: http://jsfiddle.net/thirtydot/je8aS/5/
How to clear the floats without using a fixed height?
overflow: hidden doesn't work: http://jsfiddle.net/thirtydot/je8aS/6/
You have to use some other method of clearing floats, such as clear: both:
http://jsfiddle.net/je8aS/3/
The clearfix class also works: http://jsfiddle.net/thirtydot/je8aS/11/
Here's a more important example of when you can't use overflow: hidden:
http://fordinteractive.com/misc/overflow/
That's not to say that clearfix is the only alternative - display: inline-block cleanly fixes that example:
http://jsbin.com/ubapog
As mentioned in another answer the downside to hidden is that it will, surprisingly ermm hide things like dropdown menus. However there is another way to contain with one line, by floating the parent container. This generally works where overflow: hidden has a downside, and also floating helps with a lot of legacy IE issues, again especially in lists. If you can use a width then I would use a "float in a float", or display: inline-block.
I'm not saying the "clearfix" has no use - but to me it's too widely entrenched into CMS themes (like Wordpress and Drupal) that I think in a lot of cases it's used too much and on divs that don't actually need to be cleared or contained.
I can't actually think of a situation where I can't use either overflow or float, over clearfix, but my brain's in holiday mode - but as it, clearfix, is a copy/paste solution that's sometimes the easiest thing to recommend, however it has to be the one which sets hasLayout for IE, which of course both overflow and float do too now as well.
added
this has just come up again: and brain not in holiday mode..
I'm really starting to think yes, clearfix is not necessary (at least I haven't yet found an example where it is) even #thirtydot's example above can be worked around with display: inline-block and still have IE6 support, the container having a fixed width has the IE7 and below hasLayout requirement, and by making it an inline-block for all other browsers it can be centered and the "offset" sticky-out elements will work fine while the container does stretch vertically
Example
I've also seen reference to a new improved clearfix for those collapsing margins using :before as well as :after in the clearfix hack, but unless I'm missing something the the demo is flawed - there is uneven whitespace in the pre elements and the "clearfixed" boxes do not actually contain any floats, as soon as you do float the elements in them, each method performs the same.
Note margins on pre elements don't react the same as others anyway (so try it with padding instead of margin to see the same picture while testing).. and there is also another IE "foible" whereby IE doesn't contain margins properly if they're not explicitly specified and in the demo there is explicit margins on the h2 but not the p so all things being equal a clearfixed element as demo'd by TJK in that page is artificially forcing the containment of the margins on a normal block element, much the same way as 1px top/bottom padding would do because browsers do this differently anyway!
If you do then float the elements inside those containers (the point of clearing anyway) - the margins do then contain as you would probably like them to, as they would if inside a new Block Formatting Context - without any extra :before part to the hack, all clearfix variations work equally well!
See the demo reloaded
So to my mind there is no need for this "clearfix" way anymore, simply find the best way to create that new Block Formatting Context, using haslayout for older IE's.. the properties for both are the same!
as TJK does point out in his article : http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
Better alternatives
If you can apply a width to the
element containing floats, then your
best option is to use:
display: inline-block; width: <any
explicit value>;
I think that's fair and even with 100% elements which might need padding, you can do it in conjunction with box-sizing
.clearfix {
display: inline-block;
width: 100%;
*width: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
overflow:hidden is very 'powerful' (I've been using it for several years, and I agree to what David said) but at the same time exposes to a problem. If i.e. inside the container you have some abs elements that you have to drag and drop outside of it, u won't be able to see them outside the container. In this particular case u need to use that 'clearfix' trick ;)
Yes, it's "deprecated" by CSS Display L3:
Created the flow and flow-root inner display types
to better express flow layout display types and to create an
explicit switch for making an element a BFC root. (This should
eliminate the need for hacks like ::after { clear: both; } and
overflow: hidden that are intended to accomplish this purpose.)
So now, the proper way is
display: flow-root;
Sadly it's a recent addition, so browsers haven't implemented it yet.
I've been recommending the overflow: hidden method for many years. It is widely supported.
I recently discovered to my pleasant surprise that overflow:hidden works perfectly nowadays. I had been using the clearfix method up until around 6 months ago and it is quite bloated in comparison.
Note: Make sure you have the correct DOCTYPE set if you're just testing. Caught me out a few times and I always forget!
In IE9 for instance the following just won't work without <!DOCTYPE html> at the top.
<!DOCTYPE html>
<html>
<style>
#bottom_panel {
overflow: hidden;
background: orange;
border:1px solid red;
}
#bottom_panel .col1 {
background: red;
float: left;
width: 100px
}
#bottom_panel .col2 {
background: yellow;
float: left;
width: 70px
}
#bottom_panel .col3 {
background: green;
float: left;
width: 150px
}
.clear {
clear: both;
}
</style>
<div id="bottom_panel">
<div class="col1">this is col 1</div>
<div class="col2">this is col 2. It's taller than the other columns because it's got more text in ot</div>
<div class="col3">this is col 3</div>
</div>
<div>
This should not be floating around! Should be underneath the columns!
</div>
</html>
I wouldn't say that clearfixing is deprecated. However, I would say that most versions of the clearfix currently being used are outdated.
According to the experts, this is the version your should use today:
.clearfix:after {
content: "";
display: table;
clear: both;
}
to clear: both my content i use this:
CSS:
.clr {
clear: both;
height: 0; /* i have tried 0.001em to */
line-height: .001em;
overflow: hidden;
}
HTML:
<div class="clr"> </div>
it works perfectly in every navigator. But in IE 7 & 8 the div still have a height of a few pixels. How can i avoid this?
It's a IE font problem.
Add
font-size: 0;
to your css declaration
Just coming across this and the answer Ben gave makes sense but it was incomplete in dec of 2011 on IE 7 (legacy support necessitates this.
font-size:0; is a good start but didn't initially do it for me.
Along this line of thought, you need to be mindful of line-height. If you set line-height higher up in the DOM, likely due to the nature of these things, it get inherited ( as was happening to me )
If you have set line-height on a parent, be sure to set it explicitly on the child you are trying to use to force the clear:
font-size:0;
line-height:0;
-Brandt
Have you tried using "easy clearing" (or "clearfix") for markup-less clearing. It's usually much simpler:
http://oncemade.com/renaming-and-extending-easy-clearing-aka-clearfix/
Using empty DIVs to aid presentation is generally bad practice. You might consider changing the CSS of the elements you to clear. A lot of the time clearing can be replaced by the use off inline-block. See http://google.co.uk/notebook/public/06909424369135510368/BDROpQwoQ4-fhwfsj#SDRZLQgoQtfHkwfsj.
Rich