There is a large absolute positioned Div with lots of absolute positioned content in it.
Source Looks like this:
<div id="masterdiv"
style="display:block;position:absolute;
left:0;top:0;width:595pt;background:white;">
<IMG WIDTH=793 HEIGHT=1121
style="border:2px solid lightgrey;background:white;left:0pt;top:0pt;
width:595pt;height:841pt;" SRC="../../xyz" id="masterbild">
<p style="left:574.75pt;top:67.05pt;font-family:Arial;font-size:11pt;">
<b>W1</b>
</p>
<p style="left:160pt;top:71.15pt;font-family:Arial;font-size:12pt;">
<b>Rohrbearbeitungs-<SPAN style="word-spacing:0.05pt;"> </SPAN>
und<SPAN style="word-spacing:0.05pt;"> </SPAN>Handwerkzeuge</b>
</p>
....
</div>
The problem (IE9!):
I cant scroll to the end of the div content. The scrollbar of the browser and the div itself stops at a certain point (bottom) of the page. But this is NOT the end of the content. If I put the "top" style value of "masterdiv" to -400px I can see theres actually more content.
Pictures
Bottom of the Page:
http://imageshack.us/photo/my-images/337/seitenende.jpg/
Changed Top to -400px:
http://imageshack.us/photo/my-images/269/gendertertop.jpg/
Things I tried:
Setting "Masterdiv" to 100% height or "1500px" or whatever doenst work.
Setting Body to "1500px" affects the scrollbar, but the content of the div is still ending at some certain point.
I combined these two things without succes.
EDIT: Solution:
Body Tag had "position:fixed" on it. I dropped it and it worked.
What can I do?
Im forced to use position:absolute.
Have a look at the whitespace style tag, or try fiddling around with the overflow options, it should expand automatically at that point, but not too sure about how IE9 behaves.
EDIT
It might be the default settings for the iframe. Try seeing if setting the scrolling parameter to "yes" within the iframe
Related
I have the following HTML code:
<div id="my_div" style="height:400px"></div>
<hr>
<input type="text" id="my_input">
my_div will be populated with data later (via jQuery) but the thing is that the
<hr>
appears behind my_div but my_input is where it should be (that is, after my_div).
Does anyone know why?
EDIT: A bootstrap css class (span10) was causing this problem. After I removed that class, it worked.
Give your div a position: relative value
<div id="my_div" style="height:400px; position: relative;"></div>
For testing purposes only, i would give your CSS a declaration of !important just to rule out any javascript/ bootstrap override
<div id="my_div" style="height:400px !important; position: relative !important;"></div>
A bootstrap css class (span10) was causing this issue. After removing it from my_div, it worked.
Judging from the information you've provided, I think it might depend on the content you're placing into it. As you can see here, the <hr> is displaying below the div, as it should.
One case I can think of that might be causing this is if you're inserting content that is floated using CSS inside the div. In that case, the div will "shrink" to the height of the last in-flow (not floated) element it contains, which will make it shrink to a height of 0 if there are no non-floated elements inside it.
If that is your case, then you can work around that by adding the following CSS to your #my_div:
#my_div {
overflow: hidden;
}
There are also other workarounds for this kind of problem, but this one is the easiest to try out in order to check if that's the problem affecting you.
Another issue that could possibly be affecting you is that the height of the div is restricted to 400px. If the content of the div exceeds that height, it won't push the div's boundaries down, but instead it will overflow (quick demonstration). If that's the case, you can either set the div's height to auto, so that it will stretch along with the content, or you can make sure the content won't get past the div's height by tweaking it.
set the position of both to relative and see if they appear properly
It's because your div has fixed height of 400px. It may be overflowed by the content, but it can't move other blocks further than its specified height. Probably you need to set to it min-height: 400px instead of height: 400px.
A div without content is displayed as height=zero. Try inserting a
inside the div so that it is displayed as 400px in height initially.
i think jquery first remove your "my_div" then append to your container.
try this fix
<div id="yourContainer">
<div id="my_div" style="height:400px"></div>
<hr>
</div>
$(document).ready(function() {
$('#yourContainer').find('hr').remove();
$('#yourContainer').append('<hr />');
});
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I have a div that shows some text and is absolutely positioned on a page. While it is absolutely positioned the div is just large enough to show the text it contains. When I add an inline style to that div to change it to be relatively positioned, the width of the div suddenly expands to take up 100% of the page...
I used the Chrome dev tools to toggle the relative position on/off. Turning it off causes the width to be correct, turning it back on causes the div to expand. It is an inline style so there isn't any CSS class or selector that is changing the width on me.
I experience the same issue in Firefox. Removing position: relative in Firebug causes the width to shrink back down to be just wide enough to fit the text.
If you want relative position DIV take his content width then you can give float, display:inline or display:inline-block to your DIV
could you please post the HTML and CSS, and I could have a look at it..
Meanwhile you might wanna have a look at
Position an HTML element relative to its container using CSS
and see if that could possibly help you?
to change size as content grows/shrinks use something like:
<div style="min-height:30px;max-height:300px;">
Which will mean it'll vary between 30 and 300 px depending on content
or
<div style="min-height:30px;height:auto;">
which will vary between 30px and as big as its container will allow (so forever, essentially)
I was trying to absolutely position an element at the bottom of the page (not the viewport). The element is a direct child of the BODY. You can imagine the page to have lots of content so that there is a scrollbar.
So something like this:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
This put the image at the bottom of the viewport over the existing content. However, once I added the following css rule:
body{
position:relative;
}
The image went to the bottom of the page.
So if BODY is not the containing block of all elements, what is ?
Also, I am sure this is a solved problem but I couldn't find an example with detailed explanation of the problem and the solution. Any pointers?
It could be <html>?
Set position: relative on that and see what happens.
Update - Straight from quirksmode
The containing block
In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?
position: static: No reference point, since a static block cannot be moved.
position: relative: The position the block would take if it were not moved (i.e. if it had position: static).
position: absolute: The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.) <--- Bingo
position: fixed: The viewport (browser window).
Ok lets suppose you have the following:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
<div style="margin-bottom: 50px">Content here</div>
</body>
This should solve the problem. Obviously set the bottom margin to the height of the image. Otherwise you could try setting the bottom margin of the body tag to the height of the image, then set the bottom setting for the image to -{height of the image}. This should achieve the same effect as above though.
PS In case you didnt realise, margin-bottom is the amount of space that appears below an element. If you want a coloured background for the body and you want this to take effect around the footer (like, say, if your footer is only 80% of the screen and centred, leaving 10% at either end) then you could always try padding-bottom: 50px.
Sounds like natural behaviour to me. You said the page would have lots of content and you would have a scrollbar. Having an element with position: absolute it would calculate it's position based on the nearest parent with position relative.
If the page is so high that you would have a scrollbar, the body element would stretch to the bottom of the page. Your image (position: absolute) is a child of body(position: relative), so I don't see the problem.
I also don't really understand your question:
I was trying to absolutely position an
element at the bottom of the page (not
the viewport).
This put the image at the bottom of
the viewport over the existing
content. However, once I added the
following css rule:
body{ position:relative; }
The image went to the bottom of the page.
Isn't the problem solved now? Do you want the image at the very bottom? (when you scroll down you can see it) or do you want it just above the fold?
Maybe this is a bit silly, but i think there is the above the body. I use resets, and in some of the large ones is always a line like this:
body, html { 'css properties bladiebla' }.
So to me that suggests that html is the container for body, sounds pretty logical to me ;) (but i can't find any references or proof of it myself a.t.m.)