I am trying to position a child DIV at the bottom of a parent DIV, but I would also like the contents of the child DIV to help dictate the dimensions of the parent DIV. As I have it right now, the child DIV doesn't affect the width/height of the parent DIV.
Here is a sample of my HTML/CSS code:
//HTML code:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child"></div>
</div>
//CSS code:
#parent {
background-color:#222;
position: relative;
height: 500px;
}
#child {
background-color:#444;
position: absolute;
bottom: 0px;
width: 100px;
height: 200px;
}
What do I need to do it achieve what I am trying to do? I could forgo the absolute/relative CSS rules and simply create a table within the parent DIV which would allow me to achieve both bottom alignment and content that dictates the parent's dimensions.
However, I'd like to know if there a way to do this in CSS and without having to set the width of the parent DIV.
thanks in advance!
A child div can also be wider than its parent by utilizing different positioning such as absolute or fixed positioning. Different results can occur depending on the specified position of the parent div but as long as the element is either absolute/fixed or contains a specified width, it will grow outside the parent.
Absolute In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
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 ).
The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.
Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.
As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.
With modern CSS, this is doable.
HTML:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child">
<p>CHILD ELEMENT</p>
</div>
</div>
CSS:
#parent {
background:red;
height: 500px;
position:relative;
}
#child {
background:green;
position: absolute;
top:100%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
width: 100px;
}
http://jsfiddle.net/Bushwazi/bpe5s6x3/
transform:translateY(-100%);
is the trick. It's math is based on the element
's box-model
.top:50%;
with transform:translateY(-50%);
to center it.top
for left
and translateY
for translateX
to position the element horizontally.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