Hi,
I am working on a responsive design. I am trying to position a div inside a parent div with ‘position: absolute’. I can get it to work by using ‘top: 400px’ but when the responsive design kicks in the div starts being pushed down the page. The height of the parent div varies as it is dependant on the content loaded from a database so i cant use ‘top: 40%’. Any ideas?
Thanks!
Hi,
We’d really need to see small demo to give an exact answer but the question is “why are you absolutely placing the div?” and to what effect?
Absolute elements are removed from the flow and so they care nothing about what went before and if stuff is in the way they will just overlap.
You can tie the absolute element to the parent div by adding position:relative to the parent but this still won’t stop the absolute element sitting on content should content get in the way.
If you are just trying to place a fixed height element at the bottom of a div then you would need to add the same amount of padding to the bottom of the parent so that the absolute element sits in a protected space. However you can’t do the same thing if you are placing the absolute element in the middle of a div vertically because there is no way to protect it.
What is the absolute div for? Why not use a non positioned element and just let it go with the flow.
We really need to have a bit more information before we can give a specific answer but usually when we see absolute positioning used it is used for the wrong reasons.
It’s a complicated setup so hard to explain. I am using Foundation 5. I have a Orbit image slider at the top of the page. Foundation will slide anything with the <li> tags of the orbit <ul>. Below the main image i have some more html but this is not the full width of the top images. It sits below the top images on the left hand side. When i use the Orbit slider it swipes the top image plus this html.
On the space to the right of the bottom html, i want to add a static shopping basket that is not affected by the Orbit image slider.
<div class="orbitContainer">
<ul>
<li>
<div class="orbitImage01">
<img src="testImg01.jpg">
</div>
<div class="clear"></div>
<div class="htmlContent01">
<p>Some sample text here.</p>
</div>
</li>
<li>
<div class="orbitImage02">
<img src="testImg02.jpg">
</div>
<div class="clear"></div>
<div class="htmlContent02">
<p>Some sample text here.</p>
</div>
</li>
</ul>
<div class="staticShoppingBasket">
<p>Shopping Basket HTML here.</p>
</div>
</div>
Does this make sense? Basically i want a static div in a blank area of the Orbit <ul> slider. I can’t show you the exact code at the moment as it’s not on a production server yet.
Hi,
It’s still a little hard to second guess I’m afraid and I’m still wondering why you need to absolutely place the basket into position? Can’t it just follow the content above and therefore always be below it n the flow?
If not then as I mentioned before you could set orbitContainer to position:relative and then put the basket absolutely at bottom:0; but you would need to add some padding bottom to orbitContainer equal to the height of the absolute element. If the basket is a fixed height you should be able to manage this with some fixed em padding on orbitContainer.
You are limited with absolute positioning as to what is possible which is why its usually better to get things back in the flow.
It may help if you can clarify what would be wrong with the methods above and that may get us closer to a solution
Hi Paul,
I have figured out another design solution that doesn’t involve this issue. Thanks for the help with this though.
Ok, glad you sorted it