how to set nested elements to edge of screen with css

Question

I have two nested divs, one defines an aria to the right of the screen, and the other is 100% of that. I'm trying animate the child div to the left of the screen instead of the right. I cannot animate the parent div, as it has other children, I tried using the new css3 vw unit, but i need to set the value to negative units for it to move left at all. I have got this to work by getting the size of the element next to it, and animating negative that amount, but once you re-size the window, it gets moved out of place.

My css is:

#sideParent
{
    position: absolute;
    top: 150px;
    bottom: 0px;
    right: 0px;
    width: 300px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    text-align: center;
}
#sideChild
{
    position: absolute;
    top: 0px;
    left: 0px; /* I need this to position to left of screen with a static value */
    right: 0px;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 100;
    border-right: 3px solid black;
}

If there is no other solution, there must be a way to check when the screen is re-sized and change the negative value accordingly. If no one can come up with a solution for the initial problem, can someone please explain how to do this?

thanks in advance.

Can you post a [jsfiddle](http://jsfiddle.net/)? – Jonathan Beebe Feb 21 '14 at 18:04 — Jonathan Beebe, Feb 21 '14 at 18:04

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

You need to make the parent the full width of the screen first. Then you can animate the children one at a time. Check out this question:

How to make a <div> always full screen?

change your parent div css:

#sideParent
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

Then you can animate the child div from right: 0 to left: 0

Just make sure that your parent div is the first child of the body element, and this should work like a charm.

edited May 23 '17 at 12:14

Community

1
1

answered Feb 21 '14 at 18:05

ShaneSauce

209
2
9

that's the problem, i cant make it 100% width for styling reasons, and i only need to animate one of the children. – Ozay34 Feb 21 '14 at 18:11
Hmmm. I can't imagine a scenario where you wouldn't be able to use a parent div as just a dummy. In other words, make a special div, just for wrapping `#sideChild` . I would need to see your code in order to offer more help. – ShaneSauce Mar 10 '14 at 21:36

Lu Roman · Answer 2 · 2014-04-08T20:02:33.227

If you want to move the #sideParent to the left of screen, then you should use jquery, if you want it to be at the edge of screen then the code below fits that need. if you want the inner element to be at the edge the parents parent left then you should use "offset()" instead of "position()", it depends of your project but that's up to you.

jsfiddle Demo - Move to the edge of screen

var $mainDiv    = $('#sideParent');
var $sideChild  = $mainDiv.children('#sideChild');
var leftOffset  = $mainDiv.position().left; 

$mainDiv.hover(
    function(){
        $sideChild.css('left', '-' + leftOffset + 'px');
    },
    function(){
         $sideChild.css('left', '0px');
    }

 );

And just in case that what you want is to move the inner div whole width to the left of the parent, you can do it like this

jsfiddle Demo - Move to the edge of parent

    #sideParent {
        position: absolute;
        top: 150px;
        bottom: 0px;
        right: 0px;
        width: 300px;
        border-top: 3px solid black;
        border-left: 3px solid black;
        text-align: center;
        background-color:red;
    }
    #sideChild {
        position: absolute;
        top: 0px;
        left: 0; 
        right: 0px;
        height: 100%;
        width: 100%;
        background-color: blue;
        z-index: 100;
        border-right: 3px solid black;
        transition: all 2s;
        -webkit-transition: all 2s; /* Safari */
    }
    #sideParent:hover #sideChild{
       /* Taking borders into account with calc, if not necessary only use 100%*/
       left: calc(-100% - 6px);
    }

how to set nested elements to edge of screen with css

2 Answers2