Set width of relative parent div to width of fixed child div

Question

I have a relative parent div and a fixed child div. i would like the relative parent to get the width from the child div.

<div id="parent"> 
   <div id="child"> 
   </div>
</div>

Css Code;

#parent { 
    position: relative; 
    top: 40px; 
    left: 20px; 
    background-color: #F1A323; 
    padding: 20px; 
    box-shadow: 10px 10px 5px #0F0F0F; 
    border:2px solid; 
    border-radius:25px; 
    -webkit-border-radius: 25px; 
    behavior: url(pie/PIE.htc); 
} 

#child{ 
   position: fixed; 
   background-color: #FDF0DA; 
   height: 100px; 
}

#parent { position: relative; top: 40px; left: 20px; background-color: #F1A323; padding: 20px; box-shadow: 10px 10px 5px #0F0F0F; border:2px solid; border-radius:25px; -webkit-border-radius: 25px; behavior: url(pie/PIE.htc); } #child{ position: fixed; background-color: #FDF0DA; height: 100px; } — jsledge, Jun 25 '14 at 08:17
possible duplicate of http://stackoverflow.com/questions/384145/expand-parent-div-to-child-height — Harry, Jun 25 '14 at 08:18
@jsledge please don't dump code blocks in comments. please edit your post and update the info so that's its readable and will get more attention — T J, Jun 25 '14 at 08:23
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled. — Alex Wilson, Jun 25 '14 at 08:58
"i would like the relative parent to get the width from the child div" - According to your code, your child
doesn't have any width. and is not even rendered... it's very unclear what you're asking. — T J, Jul 13 '14 at 13:21

score -1 · Answer 1 · edited Jun 25 '14 at 08:22

-1

Use the following:

#child{
   width:100%;
}

If that doesnot work, use:

#child{
       min-width:100%;
       max-width:100%;
    }

edited Jun 25 '14 at 08:22

G.L.P

7,119
5
25
41

answered Jun 25 '14 at 08:17

user3774008

45
2
11

score -1 · Answer 2 · answered Jun 25 '14 at 08:17

-1

#parent{width:500px;}
#child{width:100%}

It may help.

answered Jun 25 '14 at 08:17

Bijay Mishra

53
8

score -1 · Answer 3 · answered Jun 25 '14 at 09:59

-1

Give the width to parent div(which you want to give to the child div)

#parent {
width: 650px;
}

#child {
width: 100%;
}

the parent and child div are always equal.

answered Jun 25 '14 at 09:59

J Prakash

1,323
8
13

Set width of relative parent div to width of fixed child div

3 Answers3