Menu
I've been googling this all morning and can't seem to get it to work:
I have a parent DIV with Relative positioning and a two column child DIV setup inside of it, both positioned Absolute. I need the parent DIV's height to stretch with the content of the inner DIV's.
I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.
CSS:
#content { width: 780px; padding: 10px; position: relative; background: #8b847d; } #leftcol { width: 500px; position: absolute; } #rightcol { width: 270px; position: absolute; left: 500px; margin-left: 10px; text-align: center; } HTML:
<div id="content"> <div id="leftcol"> <p>Lorem Ipsum</p> </div><!-- /leftcol --> <div id="rightcol"> <img src="images/thumb1.jpg"> <img src="images/thumb2.jpg"> </div><!-- /rightcol --> <br style="clear:both;"> </div><!-- /content --> 
817
Centering div (vertical/horizontally) This height is equal to the viewport height. Make inner div position absolute and give top and bottom 0. This fills the div to available height. (height equal to body.)
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.
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.
Dark side of the force is a pathway to many abilities some consider to be unnatural.
$(document).ready(function() { var objHeight = 0; $.each($('#content').children(), function(){ objHeight += $(this).height(); }); $('#content').height(objHeight); }); 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
