When you have a floating element inside a container element you are required to either set the container to overflow auto or add a clear both after the floated element.
This makes sense as you are clearing the floated elements WITHIN the container.
However when using the clearfix CSS trick you are doing the clear after the container and NOT after the floated elements... I'm confused how this is working as you are now clearing the container and not the floats so it should surely still cause the container to have a dodgy height right? Because if I put the clear both AFTER the container with a physical element it would not work so why does it work with the :after ??
Anyone able to explain this? Thanks
Example:
<div style="border:#000 1px solid;padding:10px;">
<div style="width:100px;height:100px;background:blue;float:left;"></div>
</div>
<div style="clear:both;"></div>
This would not work work but isn't that what the clearfix virtually does?
The CSS :after pseudoelement means "after the element's content, but still inside an element", not "after the element itself". This is why it works.
The mozilla documentation describes it as follows:
Related
I am designing table less website using div elements and i have many floated left and right div elements inside parent div element.
Now, I am using another div element to fix parent div height automatically:
<div style="clear:both"></div>
But, I came to know following works in same way:
<div style="overflow:hidden">
<div style="float:left">...</div>
<div style="float:right">...</div>
</div>
And , i tried, it works and which reduces the Number of DOM Elements as well.
But I don't whether it is cross-browser or not.
Which method is effective and cross-browser?
overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
I'm reading through the w3c.org Visual Formatting specification.
Could anyone explain to me why the inline box "outer" is not displaying in my example here? I was trying to understand absolute and relative positioning. Since there was no positioning on the <p>tag, I thought that by setting the positioning values on <div>, the <span id="outer"> would absolutely position itself to the div. But that is not happening. If I remove the position:relative from the <div> the <span id="outer"> will display. I tried setting the z-index on the <p> to change its stacking order and make it higher than the <div>, but that didn't work either. From what I'm understanding, if an element is position:absolute, it will traverse the DOM for the first "positioned" element and position itself with that 'parent' element. And if no positioning is found, it will position itself to its containing element. This doesn't seem to be happening, since its containing element is <p id=inline> when there's no positioning, yet the <div id="container"> has position:relative. I hope I'm explaining this right.
It is being properly displayed, but it's still subject to the borders of the containing div. You've got that div set to "overflow: hidden", and the #outer span's absolute position makes it fall outside the div's borders, so it's effectively invisible.
If you take off the "overflow: hidden", you'll see the box show up instantly.
I have code like this:
<div id="container">
<div id="has-100-percent-height">
This div is positioned absolutely and display is none.
Overflow auto, too. There are many of these divs within "container"
</div>
</div>
<div id="the-div-below">
stuff
</div>
When a user clicks a certain link, the "100 percent height" div is to slide down using. What's been happening is that it does slide down, but it doesn't push the div-below down. You can see the content merely display above "the-div-below" and after it slides down, it quickly disappears.
Anyone know what could be going on? This is in firefox 4. I haven't tested other browsers
Thanks for the help!
Is the CSS for your HTML already set in stone? As others have said an absolutely positioned element is outside of normal flow therefore cannot affect the position of any other element. If you can remove the position:absolute from the #inner then the solution is very simple (and just normal browser re-flowing) - see this demo.
However if you need to keep the absolute positioning you will have to push #below down manually, i.e. JavaScript - see this demo.
Hope it helps.
The reason "the-div-below" is not pushed down is that things that are absolutely positioned don't affect layout of anything else on the page. That's the whole point of absolute positioning.
So to make things work as you want you need to position your "100 percent height" div either statically or relatively.
The remaining question is how to achieve the layout you want, since presumably there's a reason that you were using absolute positioning?
You could add a padding/margin top to the #the-div-below that is equal with the 100% height element.
What does the following do:
<div style="clear:both"></div>
and how is it used?
It will 'clear' any floated elements that appear above it in the HTML source. If you have floated elements within a container element, the container will have a height of 0 and the floated elements will 'spill out'. Clearing them will allow the container to assume the correct height.
See here for a much better explanation.
It's made to avoid float elements to keep on floating after this div. In my opinion using this is a bad idea and it's better to use a clearfix on the wrapping div containing the floating elements.
In case you have float elements, a clear:both will not wrap around them, but will be displayed after them. In a way, this resets floating.
clear:both is also useful for giving an element the height of its floating children - without it the element would be smaller than its children, which is unattractive.
A less common use it to fix IE6 problems, where it doesn't display the page properly. Sometimes elements are rendered behind the background color, and clear:both can fix it.
I've got 4 divs inside a parent div. To get them to appear side by side, I've given all 4 divs a style with float:left. The divs do appear side by side, but the parent div's height does not grow to encompass the height of the child divs. What am I missing?
This is a quirk cause by the implementation of floating elements, and occurs when you have a parent element that contains nothing but floating child elements. There are two methods to solve it. One is to set the parent element's overflow property to hidden, sometimes known as the overflow method. The other is known as the clearfix method, and involves the use of the :after pseudo-class.
The clearfix method has the advantage of allowing for specifically positioned elements to "hang" outside of the parent container if you ever need them to, at the expense of a bit of extra CSS and markup. This is the method I prefer, as I utilize hanging elements frequently.
Set overflow: hidden; on the parent div.
Explanation: floating elements removes them from the regular document flow. So, if a given element contains only floated elements, it will not have any height (or, by extension, width -- unless it has an implicit width that is default on block elements).
Setting the overflow property to hidden tells the parent element to respect the width of it's children, but hide everything that falls outside it's width and height.
Of course, the other option is to add an element after the floated divs, inside the parent, with clear: both; This makes the last element be positioned after all the floats, within the regular document flow. Since it's inside the parent, the parent's height is whatever the heights of the floated items are, plus regular padding and the height of the cleared item.
After the 4 divs, you need to "cancel" the float style.
This is done through the creation of a p for example, like: <p style="clear: both"></p>
Your parent div will automatically get the right size.
millinet's answer will work, or you could float the parent div which will also allow it to expand to contain its content
I think you should give the parent div a height of 100% not fixed so that it encompasses the height of child divs if they grow.
I recommend the clearfix method as well. This problem occurs because floating an element removes any height that it would normally contain.
PositionIsEverything posts a complete explanation as well as corresponding solutions for IE6, since the :after pseudoselector is not supported by older browsers.
If you want the divs to be side-by-side, you could try using inline-block:
<style>
.alldivs {
display: inline-block;
}
</style>
<div id="wrapper">
<div id="div1" class="alldivs"></div>
<div id="div2" class="alldivs"></div>
<div id="div3" class="alldivs"></div>
<div id="div4" class="alldivs"></div>
</div>