SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning of div around dynamic content

    I'm attempting to rearrange some elements on a page which I do not want to resort to editing the HTML template on.

    Since the code for the template is rather complex and full of crap, I made a brief diagram of the issue:

    http://i.imgur.com/Bz2cb.jpg

    Basically, there is a main parent div (red) which contains two other divs (green and blue) positioned at the top and bottom of the parent div.

    Inside of each of those nested divs is another nested div. Inside of the lower blue div, there is a div (purple) that is positioned on the left.
    Inside of the upper green div is a div (yellow) which is currently absolute positioned to the right, relative to the main all-encompassing red div.

    I want to move the purple div from the lower left corner all the way to the upper right corner. I know I can accomplish this by setting the purple div to
    Code:
    position: absolute; top: 0, right: 60px; (about)
    However, there's an issue. The yellow div has a dynamic width, so if I set the purple div to have a fixed offset from the right edge, the yellow div would eventually overlap with the purple div. If I were to compensate for overlapping, then it would also look really stupid with a lot of whitepace between the two items.

    So, is it possible to position the purple div next to the yellow div, yet have it remain "relative" in a sense to the dynamic width of the yellow div? I have tried searching for possible solutions, but I'm not even sure what terms to use to describe this scenario. The only "solutions" I have been able to find were when two divs are wrapped in a parent div and the nested divs were already adjacent to each other. But, since that's not the case here, I don't know what to do.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Haruhi, Welcome to SitePoint


    So, is it possible to position the purple div next to the yellow div, yet have it remain "relative" in a sense to the dynamic width of the yellow div?
    No, not while using AP and offset values.

    The only "solutions" I have been able to find were when two divs are wrapped in a parent div and the nested divs were already adjacent to each other. But, since that's not the case here, I don't know what to do.
    Your going to have to bite the bullet and rework the html so those divs are adjacent. That's the only way you will get it back into the normal page flow.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Could you swap the order and have the yellow div on the left?

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick replies guys.

    I thought it might be the case that I have to edit the template HTML. I just needed some experts to confirm it before I threw in the towel and edited the template or thought out an alternative.

    Anyway, thanks again!


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
  •