SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    389
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Position Div inside scalable parent

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

  3. #3
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    389
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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

  5. #5
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    389
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have figured out another design solution that doesn't involve this issue. Thanks for the help with this though.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Ok, glad you sorted it


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •