I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.