Menu
I want to have an inner div that sites inside different sized container divs, and starts at a fixed left position and then has a width that fills up the rest of the container. I've included some example css below to try to get the point across.
I have to use absolute positioning so can't just float right and set a left-margin. Any ideas of how to make this work with absolute positioning? I've also tried width: auto and some different box-sizing options.
To clarify, the trickiness of this is that the left border has to be fixed, and the left border has to be against the right border of the container. I can't use position: relative, and javascript, but I'd probably end up making .inner1 and .inner2 divs with hard-coded widths before doing that. But hoping to avoid that.
.container1 { position: relative; width: 400px; height: 300px; } .container2 { position: relative; width: 500px; height: 300px; } .inner { position: absolute; top: 0px; left: 200px; height: 100%; width: 100%; } 
762
Although you can not make a div absolute to a specific div, one way to get the results you are looking for is to add overflow:visible; to the row and left:100%; to content container. I changed the section height to 300px for demonstration purposes but it will behave the same with 100% .
Because absolutely positioned elements do not behave as block level elements and do not flow after each other like normal a <div> does. Show activity on this post. Because the element, which you give absolute position take the width from his parent and didn't behave as a block element.
You could add a "spacer" element inside the element positioned absolute ly with a negative bottom margin and a height that is the same size as the negative bottom margin. Or add a wrapper div with the padding. I tried both the main solution and the comment solution and they worked!
If you position it as absolute , then you're positioning it relative to its closest ancestor which is fixed or relative ... Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
Just specify all of the top, left, bottom, and right properties and the box will expand to be at all of those points.
.container { position: relative; width: 400px; height: 300px; } .inner { position: absolute; top: 0; left: 200px; bottom: 0; right: 0; } See the jsFiddle.
70
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
