Menu
I need to place a div stick to the right edge of its parent div and when re-sizing the browser window, it should overlap other elements in the same parent and they should be hidden.
This image tells the story
Please note that, I don't want that div to have fixed position. It should scroll just like others and the elements (texts or whatever) should be under it. Just like the attached image.
I tried the following code but, it made the red div stick to the edge of its grandparent.
.redarea{
position:absolute;
float:right;
}
What's the way of getting this done ?
280
Try position: fixed; float: right; . position: absolute; will only work if you have specified the top, left and right attributes.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
First set position of the parent DIV to relative (specifying the offset, i.e. left , top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want. It's simple and should do the trick well.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child. bordersize ).
This one does exactly what you want
#parent{
border:1px solid red;
width:100%;
height:60px;
position:relative;
white-space: nowrap;
overflow: hidden;
}
#rightchild{
top: 0;
width:100px;
right:0;
bottom: 0;
background:red;
position:absolute;
}<div id="parent" style="">
<p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
<div id="rightchild">
</div>
</div>This is the easiest way to do it imo. Give your outer box a padding on the right side, and let the inner box fill up the padding by giving it the same width and positioning it absolutely to the right.
<!DOCTYPE html>
<html>
<head>
<style>
div.outer{
width: 90%;
height: 30px;
padding-right: 30px;
position: relative;
border: 2px solid #ddd;
margin: 0 auto;
}
div.inner{
width: 30px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
