I have two divs I want to place one inside the other. The parent div has height 100% and is x-scrollable (the content will overflow to the right).
The child div has a repeatable background image set through css.
I want to place it at the bottom of the parent div (above the scrollbar), like a footer but when the scroll is moved this div should stay still.
How can this be done?
Right now I have
.parent{
overflow-x:scroll;
overflow-y:hidden;
width:100%;
height:100%;
position:fixed; }
.child{
height:33px;
width:100%;
bottom:0;
left:0;
background-image:url(<image_path>);
background-repeat:repeat-x;
position:absolute;}
<div class="parent">
<div class="child">
</div>
</div>
The problem I'm having is that the child div moves when scrolling the parent div.
Thanks.
You don't really need the child div unless there's some other content there in addition to the background image. You could do it all in the parent div.
JSBin Demo -------> HERE
After your fiddle... an edit... Forget the background of the child div. Place the background image on the parent div. let the child div be transparent and contain the text.
Updated Fiddle --------> HERE
Related
I have a parent div, which contains two other Divs and I'm looking to animate the background-image of the parent div so that it constantly scrolls along the x-axis. The image is 3840px wide and the div is 100% of the browser (1920px). Essentially the image needs to repeatedly scroll whilst not impacting upon the child elements within the parent div, is this possible?
Here is my HTML
<div id="SliderBackground">
<div id="SliderBanner"></div>
<div id="SliderStaticImage"></div>
</div>
Here is my CSS
#SliderBackground
{
width:100%; /*1920px*/
height:500px;
background-image:url(Background.png);
z-index:-1;
position:absolute;
top:90px;
}
Thankyou in advance.
I have the following.
If u see, the "asdasdasd" text is not near the top of the div.
I have a div with two divs inside
<div id="widget">
<div id="header"> </div>
<div id="content"> </div>
</div>
The header div have a fixed height, and this background image.
If you see what is in red, that part of the background make me need the div to be bigger, but it moves the content div down.
I tried to pull it up using margin-bottom: -Ypx; but I think its a ugly fix. I can't find something that works for me.
somebody can help (:?
Yeah you can use the position:absolute to keep out the div header you need this properties:
#widget {
position:relative;
}
Make the parent relative, that way the position absolute of the header will be relative to this container
#header {
position:absolute;
top:0;
left:0;
}
Position absolute to the top ande left of his container
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;
}
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.
I have a parent div that is a specified width and height. If I have a child div inside that, that is outside the boundaries, is there a way to make the parent div adjust size to fit the child div?
EX:
<div style="width:500px; height:500px; position:relative;">
<div style="width:300px; height:300px; position:absolute; top:250px;">
Some Content
</div>
</div>
As you can see in this example the child div would overflow the parent div on the bottom by 50px. I do not want to use overflow:auto because that just creates scrollbars. I really want the parent div to adjust and add 50px in height to compensate for the child div.
Check this out.
http://jsfiddle.net/jURc9/8/
You want to push the child down 250px from the top of the parent so do no use top:250px. Use margin-top:250px; and position:relative;