I am trying to wrap absolute element in relative wrapper. However after initial try I found that in case relative wrapper does not have any element then explicit height needed to be mentioned for it to wrap absolute elements inside.
I gave it try couldn't solve it. So finally thought good to ask.
<style>
.relative{
background:#ddd;
position:relative;
padding:10px;
}
.front{
background:red;
position:absolute;
top:0px;
}
.back{
background:yellow;
position:absolute;
top:0px
}
</style>
<div class="relative">
<div class="front">
<h1>Front</h1>
<p>This is the front side of the element and more fun is still to come</p>
</div>
<div class="back">
<h1>Back</h1>
<p>This is the back side of the element</p>
</div>
</div>
Above is the code and following is link for the codepen.io
However in case mentioning height is only solution then I might be doing wrong markup. Waiting for answers.
Elements with absolute positioning are taken out of inline flow. You must use inline positioning for wrapped element to achieve your goals or use more compex wrapping hierarchy.
Related
I want to align two elements,in the same line,like this: click here
full code
<div id="element1"> element 1 markup </div>
<div id="element2"> element 2 markup </div>
css
#element1 {
display:inline-block;
margin-right:10px;
width:200px;
background-color:red;
}
#element2 {
display:inline-block;
width:200px;
background-color:red;
}
Also,without overlapping each other.For example if a have a parent div,and two child divs.
The parent div,have 1000px width,and the childs have 500px each,so they fit.
But if i resize the first div to 600px,i want the second one to auto resize,and keep staying inline,without changing his position,or the first to overlap the second.
In the fiddle above,they are aligned in the same line,but doesnt matter what i do,the second one changes his position instead resizing,or they overlap each other.
Any idea?
I know it must be done with percentage,but is not working either
http://jsfiddle.net/a4aME/507/
#element1 {width:50%; background-color:red;float:left}
#element2 {width:50%; background-color:red;float:left}
Take off the the display: and float it all left.
The width attribute accepts percentage value, base on its parent (or its nearest parent with the position:relative attribute if the element has the property position set as "absolute" or "fixed").
So you can use this CSS to the child
#element1 {display:inline-block;margin-right:10px; width:50%; background-color:red;}
#element2 {display:inline-block; width:50%; background-color:red;}
PS: If you are using inline-block, you have to make sure that there is no space between the tags, so you HTML must became this
<div id="element1"> element 1 markup
</div><div id="element2">
element 2 markup </div>
Check this jsfiddle to see if it is what you wanted. I'm not using display:inline-block since it looks that it is what's causing the problem. If you don't mind using floats, then this is your answer.
EDIT:
Check this resource here to see/correct your problem.
I am trying to stack two divs A and B.
Div A - will be scrollable but its height needs to be determined by the div underneath it, Div B so if the content in Div B changes, and it's height changes the height of Div A also changes.
Div B - needs to be aligned to the bottom of page on top of a absolute positioned footer. Its content needs to be aligned to the bottom.
I've tried using position relative and float by wrapping these divs in a wrapper, but the whole thing breaks when I try to keep the Div B aligned or positioned absolutely above the footer.
I've got a feeling this needs to go back to basics, any help would be greatly appreciated
thanks
Here's a basic example. I think I have correctly understood your requirement. This example has them appear to be stacked but in the HTML they are not actually stacked, they are nested. I wasn't sure if you could allow that in your solution but fingers crossed.
Example: http://jsfiddle.net/jyR2A/1/
CSS:
#divA {overflow-y:scroll;position:absolute;height:100%;top:-100%;background:green;width:100%;}
#divB {position:absolute;bottom:0;background:blue;width:100%;color:white;}
HTML:
<div id="divB">
<!-- Div A is nested so we can use divB's height -->
<div id="divA">
</div>
<!-- Div B content -->
<div id="divBinnerContent">
Line 1 <br />
Line 2 <br />
..Keep adding more lines to test how it works <br />
</div>
</div>
How it works:
divB is the parent element defining the height of divA. So if we set divB position relative or absolute and place divA inside then we can set divA's height to 100% to give it the height of parent element divB.
Now to position divA we make sure it has position:absolute and set top:-100% which will move it up the same distance as the height of its container divB. Position absolute not only allows us to position it correctly but it also removes it from affecting the height of its parent, divB.
And the content for divB I have made a nice container for it but it is not neccessary. Simply put it anywhere inside divB (but not inside divA) and it will be OK.
You can use the content to define the height,as I have, or use an absolute height set in CSS.
Hope this is what you were after.
Le-roy
I managed to achieve this with help from this question and fiddle.
Stack div elements in css vertically (with dynamic height)
http://jsfiddle.net/nCrEc/334/
Essentially the answer was giving my Div A a height without using the height parameter but instead using absolute positioning on top and bottom. Which meant changes to Div B changed the location of the Div A's bottom (oo er) which pushed the middle div up whenever another populates the bottom area.
<div class="con">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
then using this CSS
.con {
width:200px;
top:50px;
bottom:0;
left:0;
position:absolute;
background:#ff0;
}
.top {
width:200px;
height:20px;
position:absolute;
top:0;
left:0;
background:#f60;
}
.bottom {
width:200px;
height:50px;
position:absolute;
bottom:0;
left:0;
background:#f60;
}
.middle {
overflow-y:auto;
min-height:1px;
position:absolute;
bottom:50px;
top:20px;
left:0;
background:#06f;
}
When I re-size browser the elements whose position is set absolute does not changes according to other elements. if i place absolute divs inside relative then black box is not shown.
<div id="outer"></div>
<div id="blackbox"></div>
<div class="form"></div>
#outer{
width:1250px;
height:auto;
margin:auto;
position:relative;
}
#blackbox{
width:100%;
height:100%;
background:#000;
opacity:0.5;
position:absolute;
z-index:10;
left:0;
top:0;
}
.form{
width:500px;
height:350px;
z-index:20;
background:#FFF;
position:absolute;
top:100;
left:400;
}
Used to this
<div id="outer">
<div class="blackbox"></div>
<div class="form"></div>
</div>
Define to parent div position relative and child div position absolute
Live Demo
More about Position
Absolute and relative positioning is relative to a "containing block"
Absolute blocks are placed relative to their "containing block". They define a new "containing block" for their children.
Relative blocks are placed relative to their in-flow position. They also define a new "containing block" for their children.
So, when you place an absolute block X inside a relative block Y you are saying "put Y in the flow of the page, shift it around a bit and then fix X relative to Y's new position".
Looking at the code - you have set outer to have a height of auto and blackbox to have a height of 100%. So the parent's height is based on the child's height, and the child's height is based on the parent's height! So they collapse to 0px. That is why you are not seeing blackbox. Try #outer {height: 1250px;} to see things...
Hope that helps, if not then read the specification - that is always the ultimate answer to all these questions (it's how I learned CSS)!
http://www.w3.org/TR/CSS2/visuren.html
You have a typo in your css. Change from #blackbox to .blackbox
<div id="outer">
<div class="blackbox"></div>
<div class="form"></div>
</div>
#blackbox -> wrong
use .blackbox { }
Also remember that absolute positioned elements must always be inside relative positioned element
This is my code :
HTML
<div class="item">
</div>
<div class="item">
<div class="item-abs">
</div>
</div>
<div class="item">
</div>
CSS
.item
{
position:relative;
z-index:5;
float:left;
background-color:red;
width:100px;
height:100px;
margin:10px;
}
.item-abs
{
position:absolute;
top:0px;
left:40px;
z-index:500;
background-color:blue;
width:100px;
height:100px;
}
as you can see, if children have got 500 of z-index, is under the next parents. Is there a way to force the children z-index? Get riding the stack of the father? Or this scenario can't be done?
I can't change z-index of parents, and I'd like to do it without setting a proper descent z-index with javascript...
Sure there is, you don't even need to set the z-index of the child.
Just set the z-index of the last div to a lower z-index, and you are done.
Example
The reason for this behaviour is the following: If parents have the same z-index, the one coming last in the DOM "wins". So technically a simple z-index:1 on your parent with the absolute child would be enough. Other possibility is to set the z-index just on the child:
Example
The following fiddle seems to do what you want (I believe):
http://jsfiddle.net/BhQNr/3/
This is done by removing the positioning on the parent elements and making the child relative (it works with absolute but the left and top values are closer than when using absolute).
I have a div that I want to float other divs in. Within the floating divs, I need the content to be positioned at the bottom because some of them have higher content than others and I don't want them to align on top. I have tried something like this:
.right {
float:right;
}
.left {
float:left;
}
.actionCell {
margin:2px 5px 2px 5px;
border:1px solid Black;
height:100%;
position:relative;
}
HTML:
<div style="position:relative;">
<div id="HeaderText" class="left actionCell"><span style="position:absolute;bottom:0px">Header Text</span></div>
<div id="SelectedItems" class="left actionCell">10 Selected Items</div>
</div>
The one with the span on the inside works, however I need its parent container to grow to its width. Any ideas how to solve this problem without using tables?
Unfortunately absolutely positioned elements no longer interact with their parent, so to get the effect you want, you'd need a hack. Fortunately, web development abounds with hacks:
CSS only, using a prop element
Create a visibility: hidden element inside your <div id="HeaderText"> that has the same content as your absolutely positioned <span>. This will force the width of <div id="HeaderText"> to contain your absolute <span>.
On the downside, this duplicates content that anyone without CSS (and search engines) will see.
jQuery to get absolute child's width
Set the width <div id="HeaderText"> to that of its absolute <span> child. This gets around the duplicate content, but your users need Javascript.
You can see them both in action here.