I have a div inside another div which has a fixed position at the bottom of the page. I need the outer div to scroll all the way past the inner div allowing all the content to be shown.
.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}
<div class="outer">
<p>Lots of content......</p>
<div class="inner">
<p>More content fixed in a box at the bottom of the page.....</p>
</div>
<div>
Maybe this well help describe it better- http://jsfiddle.net/winchendonsprings/dDgjQ/2/
What I need in this example is the yellow text to scroll all the way to the top of the red box.
You just need to add some padding to the bottom of the div.outer and adjust as necessary for the size of the red div.
In this instance, I did padding-bottom:100px;
http://jsfiddle.net/jasongennaro/dDgjQ/3/
EDIT
To respond to your comment re div.inner not appearing on each page, you could do the following with jQuery:
$('.inner').parent().css('paddingBottom','100px');
Here it is applied:
http://jsfiddle.net/jasongennaro/dDgjQ/4/
And here it is with the div.inner removed:
http://jsfiddle.net/jasongennaro/dDgjQ/5/
EDIT 2
You could also create another class and only add it to that page.
http://jsfiddle.net/jasongennaro/dDgjQ/6/
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I'm not sure if that title made sense but I'll try to explain to the best of my ability.
I want to add a div basically on top of an image, which is simple. I wrap the image around a div and then give things like top:, left:, from that.
Yet this div that the image is inside of exceeds the border of the actual image and goes all the way out to the parent div. How do I make it so that the border of the div just wraps around the actual image inside the div.
The black square is an image. But the div with the class of image, does not have a border that wraps around the image.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
Add display: inline-block to the .image div:
display: inline-block;
http://jsfiddle.net/wwRhB/4/
I'm trying to solve a scrollbar problem.
I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header
This post helped me with this part: Middle div with 100% in CSS?
The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.
Now I have this: http://jsfiddle.net/rv4XS/31/
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">data<br/>
data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
Thanks for the help.
EDIT 1: Only firefox and chrome, No IE.
EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?
If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.
You can give #content as below :
Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.
Correct One
#content {
width:100%;
height:100px;
overflow: auto;
}
I have updated JSFIDDLER
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...