I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.
But I noticed, with some css, below code is interesting:
<div>
<div>
</div>
</div>
The parent divs highlight area didn't cover the child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?
There are some cases:
If the child uses position: relative; top: 200px and move away from the parent.
If the child does something similar using a negative margin. (similar to 1)
If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.
It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:
<div style="clear: both"></div>
It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.
You may please show the css to get clear idea.
If the inner element is floating or positioned absolutely, it won't affect the size of the parent.
If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.
Related
If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
If the parent has a position other than static, the child no longer overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;position:relative;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
Why does this occur? What is this behavior called?
I'm using Chrome, is this behavior consistent across browsers?
That's because the spec defines overflow as
This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.
The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"
If the element has position: absolute, the containing block is
established by the nearest ancestor with a position of absolute,
relative or fixed
Therefore the absolutely positioned element is not affected by that overflow: hidden.
If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.
First of all, take a close look at the MDN Documentation CSS Position.
So how does this relate to your question? let's first analyze position: absolute:
absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
As far as your case goes, the positioned ancestor div element does not have any specified position attribute to it.
Therefore, it assumes the default position: static which literally specifies nothing other than the standard position of the element in the page. Check it out:
static:
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
In other words, the child will not be positioned relative to its parent. The weird behavior is because you expect the parent div to be positioned when is not positioned at all. It falls to ask: what is the nearest positioned parent then? The answer is to go up on the DOM tree and find it, logically since you have nothing in your example but your two div, the nearest parent will be webpage document itself.
So, how can you fix this? By adding (for example) position: relative to the parent div element.
EDIT: Overflow and Position properties:
By using overflow, you are typically trying to do one (or all) of the following: clip content, render a scroll bar, display any overflown content in a particular way. I gather your goal however is to have the child div not overflow the parent div. The question of how to avoid this overflow can take you to a place you do not want to go.
So by narrowing down what overflow is all about: (long story short) it is about controlling/modifying the look and feel of the content of what is inside a particular HTML element. Keep in mind, the content, not the element itself.
In your case, you may perceive the child element of your parent div as being the content of the parent div. Rather, what you actually see is the contents of the child element. The positioning of the parent and child with respect to each other is thus not controlled by the overflow property, but by the position property.
Is this consistent across browsers?:
Since CSS 2.1, the overflow (visible | hidden | scroll | auto) and position (static | relative | absolute) have been supported in all major browsers. Any discrepancies would occur when you extend on the overflow since certain of its attributes are not widely supported. See here for reference: Can I Use: Overflow (also scroll to the bottom for the CSS 2.1 reference).
Do you have any questions about this? Ask in the comments below.
overflow property is not inherited anyhow: http://www.w3schools.com/cssref/pr_pos_overflow.asp
So in your first case it is understandable it is not working, since with static position the browsers put it in the order it reads and overlooks collisions.
In your second case absolute positioning actually sets a space for the container div and then puts the second div into it - thus makes the overflow hidden.
You can imagine it this way: in your first case you created two divs which are not related to each other but positioned on each other in the second case you created a container and forced another div into it by setting the container's overflow to hidden.
Hope it helped easy understanding,
Andrew
The relative value for the position property is very similar to that of the static value. The primary difference is that the relative value accepts the box offset properties top, right, bottom, and left. These box offset properties allow the element to be precisely positioned, shifting the element from its default position in any direction
A Case: a div is inside div.
When child div that contains some text and is made float to left using CSS3 float property, the parent div's height becomes zero.
what is the cause of this and any solution?
Note: the div's sizes are in percentage(%).
Floating an element takes it out of the normal flow of elements with one of yhe side effects being that it will no longer influence the dinensions of its parent element.
The easiest way to clear a float is to set the parent's overflow property to hidden.
However, this may be undesirable as you could have elements nested in the parent that you need to overflow it. In that case, use the :after pseudo element to clear the floated element.
.parent:after{
clear:both;
content:"";
display:block;
height:0;
}
A third solution is to simply give a sibling following the floated element the clear property but that one obviously depends on your layout and markup.
Incidentally, float is not a CSS3 property, it's been around for a while.
Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.
<div>
<img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
<p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>
div {
background: green;
display: inline-block;
}
my jsFiddle
Any advice is greatly appreciated
Change display property of div to table-caption
(Tested in firefox and chrome)
Updated jsfiddle
Here's the best that I've found:
http://jsfiddle.net/y8Qnd/3/
What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.
This would mean you would have to move up the DOM tree, as you want the image to determine it's parent width. Moving up the DOM tree is unfortunately not possible (yet).
As an alternative, you could position the text absolute, to lift it out of the document flow, and therefore not influence the width of it's parent div. This however would also mean that the height does not get influenced, which is probably not what you are after. You could mimic the correct height by repeating the parent background, but the content underneath would not get pushed down, so that is also not really an option I think. I set up an example anyway: http://jsfiddle.net/y8Qnd/2/
The only option I can think of is javascript. Get the width of the image and apply it to the parent container. In jQuery (I will probably get bashed for using jQuery for such a trivial thing, but I am just not used to writing 'old school javascript' anymore...) it would look something like this:
var $wrapper = $('div'); // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);
and an example: http://jsfiddle.net/y8Qnd/6/
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.