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>
Related
So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.
Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?
I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.
Is there any way around this without the use of anything other than css?
Simply make use of CSS' table display.
Take the following example markup:
<div>
<figure>Example one</figure>
<figure>This is example twooooo</figure>
<figure>3</figure>
</div>
If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:
div {
display:table;
}
div > figure {
display:table-cell;
}
All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.
Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.
For browser support, see: http://caniuse.com/#feat=css-table
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+.
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 wrapper div with a min-height set. Position is relative and display is block. I have two column divs floated left and set to inherit min-height.
When I have lengthy content the background color of #wrapper never extends to match the content in the column divs.
Page is here: http://youngimaginations.dreamhosters.com/index.php
CSS is here: http://youngimaginations.dreamhosters.com/yi.css
Can someone point out the error of my ways?
overflow: auto will do the trick
or a <div style='clear: both'> after the floated elements.
The proper fix is called "clearfix".
Read about it here, you'll never look back.
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.