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.
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+.
Is there any way to absolutely position a div relatively to its sibling? For example: Inside a div there are two other divs - div1 and div2. I want to absolutely position div2 relatively to div1.
Absolute positioning is dependent on the "current positioning context", which may include a parent element (if absolutely or relatively positioned) but will never include a sibling element.
Can you reorganize your dom so that you have a parent-child instead of siblings? If so, you could set the parent's position to relative or absolute and the child's position to absolute and the child's position would remain absolute in relation to the parent.
There is no way using absolute position, according to w3c specification:
In the absolute positioning model, a box is explicitly offset with respect to its containing block
— relatively to parent block, not to sibling one
And no way to use relative positioning, also according to to w3c specification:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position.
— relatively to block's position, not to sibling block
summary:
Nobody can solve problem you described
The correct answer is: No, but at least its vertical position can be affected by siblings.
As the other answers state, the position of an absolutely positioned div is relative to its ancestors. To be precice, it is relative to the first ancestor that isn't statically positioned, when traversing up the DOM-tree.
However: an absolutely positioned element will also be affected by its siblings (the ones that come before the element). If those preceding siblings are relatively positioned, and your absolutely positioned element has its top-property not set, then it's placed vertically below those relatively positioned siblings.
<div class="relativeContainer">
<div class="relative block">relative 1</div>
<div class="relative block">relative 2</div>
<div class="absoluteTopZero block">absolute top 0</div>
<div class="absoluteTopInherited block">absolute</div>
</div>
See this fiddle:
https://jsfiddle.net/fgxeu54t/28/
Depending on your needs, you can float them or position both absolute with appropriate left/top/right/bottom values.
Post your markup and explain exactly what you're trying to achieve.
Try it with jquery
<script type="text/javascript">
$('#div2').css('margin-left', $('#div1').outerWidth() +XXX + 'px');
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 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.
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>