I'm trying to expand this div across with width of the browser. I've read from here that you can use {position:absolute; left: 0; right:0;}
to achieve that as in the jsfiddle here: http://jsfiddle.net/bJbgJ/3/
But the problem is that my current #container
has a {position:relative;}
property, and hence if I apply {position:absolute}
to the child div, it would only refer to #container
. Is there a way to still extend my child div beyond the #container
?
In this case, we set the child element's width to be 100% of the viewport width by using a percentage viewport unit (vw), then, we move it to the left side (by the distance of the viewport's half, minus 50% of the width of the parent element) with the left property.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Use absolute positioning and instead of setting the offset with top use bottom . With this property you can ensure the position of the bottom edge of your div - any change in size will force the div to expand upwards.
I can think of five ways to potentially accomplish your goal:
Use negative margins on the inner element to move it outside of the parent
Use Javascript to move the inner element outside of the parent.
Change the source code and move the inner element outside of the parent.
Use position: fixed
on the inner element. This will allow the inner element to break out but has the down side that the element will be fixed at the given position (never moving).
Remove the position: relative;
from the parent element or give the parent element a position: static
You can try adding overflow:visible
to the parent div
, then making the child wider than the parent.
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