Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Relative parent DIV to inherit the width of absolute child DIV

Tags:

css

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!

like image 357
jaxim Avatar asked Feb 12 '13 15:02

jaxim


People also ask

How do you make a child div element wider than the parent div?

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.

Is absolute position relative to 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.

How do I make div fit to parent div?

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 ).


2 Answers

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.

like image 163
George Katsanos Avatar answered Sep 30 '22 02:09

George Katsanos


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/

  1. transform:translateY(-100%); is the trick. It's math is based on the element's box-model.
  2. You could also combine top:50%; with transform:translateY(-50%); to center it.
  3. You can swap top for left and translateY for translateX to position the element horizontally.
like image 41
Jason Lydon Avatar answered Sep 30 '22 03:09

Jason Lydon