Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Side by side boxes: how to make one slide underneath?

    Imagine two boxes side by side.
    The right one is floated right, fixed width holding a photo, and the left contains text so fills any remaining width to the left edge of the container.

    If I resize (squash down) the browser I want the text in the left box fluid. OK so far so good...

    Here's the difficult part:
    I need a minimum width on the left container, so when that is reached, the text box stops reducing, and right photo box starts sliding underneath the left until it disappears.
    Is this possible?

    Any help appreciated!

  • #2
    New Coder
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Solved.
    position: relative on left box.
    position: absolute on right box.
    Setting the margin-right on the left box to 'protect' the right side box did the trick.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 629 Times in 628 Posts
    This certainly is not the way to do things. There is much here that you are not telling us.
    If floating the right one right is the only styling then they are not side by side to start with.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that sunfighter.

    This is the code someone gave me that solved it:

    JSFiddle

    Code:
    .leftbox {
        position: relative; /* stay sort of in the document flow */
        z-index: 2; /* be positioned at level 2 */
        min-width: 200px; /* minimum width at which to stop getting smaller */
        margin-right: 200px; /* catering for that right column */
        background-color: rgba(155, 155, 255, 0.8); /* slightly transparent so we can see the right box go 'underneath' it */
    }
    Code:
    .rightbox {
        position: absolute; /* remove from the document flow */
        right: 0; /* sit where we want it to */
        top: 0; /* sit where we want it to */
        z-index: 1; /* be positioned at level 1, so below level 2 */
        width: 200px; /* set a width */
        background-color: rgba(255, 155, 155, 0.8); /* uhh, colours are nice */
    }

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 629 Times in 628 Posts
    By it's elf this does not work. There is still much here that you are not telling us.

    Just put this message here so other will not think this is a fix.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New Coder
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It certainly does work by itself (apart from adding some simple HTML) - just look at the JSFiddle to prove it.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 629 Times in 628 Posts
    I'm gonna call early April Fool's on me. I had the code in my editor and it didn't work. You had more text in your example and a body style so I copy/pasted over mine and it worked. Don't know why, but it does work.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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