I ran into a quite annoying problem a few days ago. I'm working on a website with the following structure:
[header]
[menu strip]
[featured stuff]
[contents]
[footer]
(these are all horizontally centered divs under each other with the same fixed width in this order)
Later on I will change the contents of the "contents" part. Inside the "contents" div there will be other divs, sometimes with a fixed height and sometimes not.
Now here's the problem: any time I put another div into the "contents" without a declared height, the inner div renders with 0px. It doesn't matter if the inner div has elements with declared height or not. It works with declared heights, but I cannot guarantee that I will know the height of the contents at all times.
What could be causing this?
This sounds like a clearfix issue when elements inside the div are floating.
The problem happens when a floated
element is within a container box,
that element does not automatically
force the container’s height adjust to
the floated element. When an element
is floated, its parent no longer
contains it because the float is
removed from the flow.
Related
I'm pretty CSS-savvy, but I'm seeing some odd float/clear behavior. I have it working, but I'm not entirely sure why and am looking for an explanation.
JSFiddle: http://jsfiddle.net/ismyrnow/JV5n6/
I have a 2 column layout - sidebar and content - where the sidebar is floated but the content is not; the content div has a left margin applied to it.
If I use clear:both on any elements in the content div, the element unexpectedly drops below the height of the sidebar div (unexpectedly because the floated sidebar isn't directly affecting the positioning of items inside the content area).
What is even more unexpected, is that when I add overflow:auto to the content div, the problem goes away. (I found the solution here)
Can someone explain:
Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.
Why overflow:auto on the parent element fixes the issue.
Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.
It may not be directly affecting its position, but it would still have affected it anyway, because in the absence of any clearance, floats aren't normally restricted in how they affect the rest of the normal flow layout even once they are taken out of it, not even by different parent elements such as your .b content element with the left margin in this case. The only real restriction is that floating elements may only affect elements that come after them in document tree order, i.e. elements that are following (not preceding) siblings, as well as their descendants.
The content that's just above the element within your content column isn't tall enough to push it beneath the floated element. If you remove that declaration, you would see that both .c elements become positioned next to their respective floats as well.
When you add clear, what happens is that it forces the clearing element to be positioned beneath the float regardless of where it ends up horizontally.
Why overflow:auto on the parent element fixes the issue.
This is because any block boxes with overflow other than visible generate block formatting contexts. A property of a block formatting context is that floating boxes outside it can never interact with any boxes inside it, and vice versa.
Once you cause the content element to establish its own block formatting context, your floating element is no longer able to affect any elements inside the content element (see the section on the float property), and the clearing element inside it is no longer able to clear any floats that are outside the content element (see the clear property).
For clear:both
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
The clear property applies to both floating and non-floating elements.
When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.
When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
The floats that are relevant to be cleared are the earlier floats within the same block formatting context.
I hope this will clear your doubt.
This is the link from where i found the above info.....
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
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
What I'm trying to achieve:
Two plus rows with each containing three columns. For the rows, I have specified relative positioning containing three images per row, for two rows. This works fine.
I want layered divs beneath those images, using position absolute and negative z-index, which also works fine for the first row. The second row, the images line up fine, but the absolute positioned divs within appear on the first row.
jsFiddle here:
http://jsfiddle.net/Ajdin/tNGCM/
I've read a few questions on the board, and googled css absolute positioning since that's where I'm thinking I may be misunderstanding something. Please help :)
Since the div ".hireBioImg" set "float" property, it wont be extended the height to its parent. so in hireBioRow, you need to add "clearfix" to wrap float elements inside.
Please see updated here:
http://jsfiddle.net/tNGCM/1/
And more about clearfix:
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
http://www.webtoolkit.info/css-clearfix.html
I was playing around with a floated div example, where I have a floated container and some floated child divs except one non-floated child
You can see the example on;
http://jsfiddle.net/emeRJ/7/
Now I wanted to understand the behavior or rendering for this non-floated child div...
2 questions:
Could you please explain how it renders currently and what difference does it make if I have it coded after all the child divs (i.e. it is the last child element)
Also will it have any impact on the non-floated child if I make the container as overflow:hidden ?
Answer 1
At the moment the un-floated div right at the top with the red border is displaying block so it spans the whole width of it's containing div. It is unaffected by the other divs in the containing element
If you move it to the last position in the containing div the other floated divs do affect the un-floated one so you need to clear: both; (which clears the float and places the un-floated div under the floated divs) with CSS, otherwise any text contained within the un-floated one will be floated to the left and then would proceed to wrap around the floated elements (it doesn't do this at the moment because the text isn't long enough). Unless that's what you are trying to achieve?
Answer 2
It shouldn't make any difference as nothing is actually overflowing the containing div which would be set to overflow: hidden;
Hope this helps
In my project, I need to implement a container div that should have an unknown (unlimited) width, without breaking to a new line if its width overflows through the browser's window.
The container div has the CSS property of (white-space: nowrap; display:inline;) and the components inside this div has (float:left) CSS property. All widths are set statically. To test the behaviour, i used a button that calls a javascript function that appends a component inside the container div.
The problem is that when the total width of the container div increased to more than the browser's window width, the components inside the container div will break to a new line. I wonder whether it is possible to have a div with unlimited width?
Many Thanks..
The white-space: nowrap property does not apply to floated elements. Simply put, when you float an element to the left or right, there is no white space between them.
See white-space (CSS property) for more information on what white space is and the line that specifically states you can't do this with floats.
Try setting them to display: inline-block so that the parent actually considers them to be content.
Try adding a specific height to the container div, or removing the float: left rule from the components inside the div.