I have a div with an image positioned absolutely. But I want to have the height be dynamic, so that it shows the image. Right now, the div ignores the image and will collapse to the content of the text. How can I get the div to show the whole image?
<div style="position:relative; height:auto">
<img style="position:absolute; top:100px; left:100px;"/>
</div>
Elements that are absolutely positioned are removed from the normal flow. That means that all elements will ignore it, as if it didn't exist. To solve your problem, you need to use JavaScript to get the height of the image and adjust the div's height accordingly.
Related
How do I keep the footer on the bottom without being affected by the position:absolute element. Right now, the footer's position is relative and apparently the box with absolute:position create its own stacking context and overflow the footer.
The html looks like below
<div style="position:relative">
<div style="position:absolute">
</div>
</div>
<footer style="position:relative">
</footer>
Position absolute elements don't have dimension. (height & width).
So in order to stack correctly, you have to :
give height for your absolute position element.
or
Add margin-top on your footer element based on your absolute position element height
When you use position absolute it is absolute positioned to the nearest ancestor element which has relatively positioned. You can have your footer not disturbed by enclosing your absolute div inside a relatively positioned div.
If you don't want to do that change you can move the element using margins and left,right,top and bottom properties.
Here's my markup:
<div class="container" style="position:absolute; height:300px;">
<div class="target" style="height:50px;">here's my target</div>
</div>
I need to make .target positioned at the bottom of .container without changing .container's position.
Add position:absolute;bottom:0; to .target's style.
To avoid general confusion regarding absolute positioned elements make sure:
container element has position :relative;
target element has a horizontal and a vertical style ( left:0; bottom:0; );
target element or the stuff you put inside has height and width ( text works just fine even without )
I want to center text, both vertically and horizontally, on the pixel that would normally be the top-left of an absolutely positioned div. Here is the html:
<div style="position:absolute; background-color:#EEEEEE; left:100px; top:100px;">
<div style="position:relative; top:-50%; left:-50%;">
My Centered Text
</div>
</div>
JSFiddle: http://jsfiddle.net/fHJkE/1/
As you cans see the html centers the text horizontally, but not vertically. The 'top:-50%' styling doesn't seem to have any affect.
Why is the percentage based top being ignored while left isn't? What can I do to have it center vertically?
EDIT:
Since my question is being misinterpreted, this is what I want:
Top is not being ignored. Top property, when percentage, is relative to the height of a parent object. Since your parent doesn't have a height, top won't work. Unless, of course you set the top in pixels.
try this DEMO
i removed ur div and replaced it with <p> line-height:(parent element's height)px;
will center your text at the middle;(vertically)
If you really want to do it this way, the only way to get the computed height without setting it, is through Javascript. Try it, it will do the trick:
var dv = document.getElementById("dv-align");
dv.style.top = "-" + (dv.offsetHeight/2) + "px";
http://jsfiddle.net/fHJkE/5/
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.
<div style="float:left; width:50%;">
div 1
<div style="position:absolute; width:105%">nested element</div>
</div>
<div style="float:left; width:50%;">
div 2
</div
If an element exceeds the width of its floated parent element, the next element is pushed down unless I apply overflow:hidden on both floated elements, which defeats the purpose because I DO NOT want to hide the overflowing content. Is there any fix for it?
You have to make sure the content inside is not wider than the divs to stop the elements being pushed down in this scenario.
You could perhaps put margin-right: -5% on the positioned div to make it's width narrower in the document flow, but it should still display at 105% wide once rendered.
Set it to 100%, not 105% - otherwise, it is simply doing what you told it to do.