i have a container div which is position:relative and the squares are position:absolute because i want to play with their positions.
Like what you see, the container does not fit the content except if the squares are positioned in Relative, is there a solution for this?
I don't want to just set the height for container because the squares are not static so i want something that resizes automatically.
Thanks
Unfortunately it is not possible to contain absolute positioned elements..
They are taken completely out of the normal flow, so nothing knows how to wrap around them..
I need a bit more clarity in your question and depiction but I think I catch what you are saying.
I am guessing what is in the image above is what is currently happening but you want the gray, relatively positioned container to "surround" the abolutely positioned containers, wherever they may be?
If so, I would add just one more DIV after all your absolutely positioned containers that has clear:both attributed to it. That's my personal little tip for making sure the parent container hugs all of its kids, no matter where they go running off to.
Hope that helps
If you know the height of the absolutely positioned elements, however, you can set the 'containing' div to a min-height of their top offset plus that known height. Again, it won't contain it in the proper sense, but it will be at least that tall.
Related
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
I would like to know how to achieve that in CSS3
I would like to know how to make the div bigger on one side and smaller on the other side
But at the same time the content is NOT skewed of affected
i tried prespective:300;
it gives the effect needed partially but the content is still affected and a negative value doesn't fix it.
Any solutions?
Hmmm I think you can use a inner div. First, skew the parent div. Second, unskew the inner div. If you skew the parent with 50deg, then unskew the child with -50deg. I hope this helps. Good luck!!!
I have a strange problem....
Div should expand to 100% of available space by default, but its not the case.
I don't understand what's going on, even if I put display:block it's behaving as automatic width (relative to content).
I appreciate any help.
Thanks in advance.
http://jsfiddle.net/T3arP/
The effect I need to achieve is let the box with green border absoluted or fixed to top of its container, so you can scroll keywords but title will remain there.
When you absolutely position something (that's using position: absolute or position: fixed) width: auto no longer expands it to the container's width. The rules from which the width is actually determined are complicated*. That's why many people consider it a good practice to set a specific width on those elements (absolutely positioned ones, that is).
*you can find out about those rules at http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width)
As has been said, once you absolutely position an element, it loses the parent's tag association in a sense. So you could do something like this maybe.
http://jsfiddle.net/T3arP/1/
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
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.