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+.
Related
I am having cross-browser trouble with a DIV layout on the following page:
www.richmindonline.com/index2.html
I have created a border around both the divs to make it easy to identify.
It appears that IE9 is nesting the inner DIV correctly within the outer DIV, whereas Firefox is separating the divs differently. I am using a "cheat" tag in order to align the divs to center, but I test without those tags and the browsers still render them differently.
The divs in question are located under my comment line:
I know you guys are smart, and I'm looking for your help! Thanks, Rob
You need to clear floated divs by adding something like: <br clear="all"/> or <div style="clear:both; height:0;"></div> and add a width to the parent div, this should fix it.
More info: A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
e.g.
<div class="parent">
<div style="float:left"></div>
<div style="float:left"></div>
<div style="float:left"></div>
<br clear="all"/>
</div>
For more information: http://quirksmode.org/css/clearing.html
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:
I have a similar problem as CSS Auto Margin pushing down other elements: A right floating sidebar gets pushed down below the main non-floating content div. The answer proposed works: just reverse the order of the markup and write out the float div before the non-float div.
For example, this:
<div class="container">
<div id="non-floating-content">
fooburg content
</div>
<div id="float-right">
test right
</div>
</div>
needs to be awkwardly re-ordered as:
<div class="container">
<div id="float-right">
test right
</div>
<div id="non-floating-content">
fooburg content
</div>
</div>
So then, why does this also work without reordering: Elastic layout with max-width and min-width using grid based design?
Check out the live demo. The ordering of the markup is still sensible: the float div is written out after the non-float div. Yet the float doesn't get pushed down on the page.
I ask because I would prefer not to have to hack the theme PHP (to reorder divs) in order to properly style it.
Other posts that also say the solution is to "re-order your divs":
2 column div layout: right column with fixed width, left fluid
Semi Fluid Layout CSS/Html
The reason this works is because your containing element has no height. When you have nothing but floated elements inside a containing element, it will collapse to 0 height. If you were, for example, to add overflow: hidden; to #fluidColumnContainer, it would act as a clear-fix, expanding the container to contain the floated elements. Then you would see the right-floated element drop down again.
the reason the one you linked works is because the other columns are also floated
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>