I have a bunch of html that is absolutely positioned and then html snippet that is supposed to show after that. But they over lap.
http://jsbin.com/okamot/1/edit
Everything under .drag-drop is supposed to be absolutely placed so the height and width of .drag-drop become zero. The exhibit button and the exhibit text are supposed to show after the bolded This is Drag and Drop Item. But because the height of .drag-drop is zero it shows right over the contents of .drag-drop`.
I have had this issue before, but fortunately it was easy to calculate the height of the children of .drag-drop and then I would set the height of the .drag-drop to be that using javascript. This time it is harder as it contains more children and they are not constant. How would I change my css so that the Exhibit shows below the drag drop ?
Absolute positioning removes the element from the layout, therefore the children are no longer part of the calculation of the parent's sizing. You'll need to use JS to solve this.
The best way is not to make the content absolute positioned at all. Could you make them relative positioned, or float them? You can still manipulate their position, height, width, etc., and they'd have layout so the containing div would have the correct height.
Note if you float them, you may need to add a "float breaker" at the bottom of the containing div to get it to calculate the height correctly:
....
<div>some floated content</div>
<br style="float: none;"/> // float-breaker right before containing div closes
</div>
Otherwise the previous answerer is correct, you'll need some js hackery.
Related
My problem is similar to this post: How do I position an element relative to another without taking up space.
Though what I want is not exactly what was proposed there. But until now it was the closest example which I could find.
From what I understand, in this example, the position of the element in question gets updated only when a click on an icon-element is detected.
But with position:fixed that would mean that a scrolling wouldn't change the position.
What I want is to move the relatively positioned element dynamically with its parents while it does not take up its original space. (Background: I want some submenu-item-div to appear above its parent.) So the structure is similar to this:
<div class="entry-options">
<div class="menu1"></div>
<div class="menu2">
<div class="submenu2"></div>
</div>
</div>
submenu2 should be positioned above the entry-options (a horizontal bar) without changing its height or width, which should only be determined by the menu* - items.
Is that possible without changing the structure?
If you add position: relative; to the parent and position: absolute to the child, the child will be positioned relative to the parent without taking up original space.
Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.
<div>
<img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
<p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>
div {
background: green;
display: inline-block;
}
my jsFiddle
Any advice is greatly appreciated
Change display property of div to table-caption
(Tested in firefox and chrome)
Updated jsfiddle
Here's the best that I've found:
http://jsfiddle.net/y8Qnd/3/
What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.
This would mean you would have to move up the DOM tree, as you want the image to determine it's parent width. Moving up the DOM tree is unfortunately not possible (yet).
As an alternative, you could position the text absolute, to lift it out of the document flow, and therefore not influence the width of it's parent div. This however would also mean that the height does not get influenced, which is probably not what you are after. You could mimic the correct height by repeating the parent background, but the content underneath would not get pushed down, so that is also not really an option I think. I set up an example anyway: http://jsfiddle.net/y8Qnd/2/
The only option I can think of is javascript. Get the width of the image and apply it to the parent container. In jQuery (I will probably get bashed for using jQuery for such a trivial thing, but I am just not used to writing 'old school javascript' anymore...) it would look something like this:
var $wrapper = $('div'); // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);
and an example: http://jsfiddle.net/y8Qnd/6/
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)
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.