Override parent <div> width

I have a div with a width say '90px' and height say '50px'
i have another div within this div, but i need this div to have 100% width but not relative to the parent div.

<div class="fn-area" style="left: 288.594730238px; top: 176.61229611px; width: 222.045169385px; height: 104.943538269px; border-color: ;">

<div class="fn-note">
adfasdf
</div>
</div>

I want the second div to take the width of the text inside it, sometimes it may be very long. right now it is wrapping the text on the basis of the width and height of the parent div. and also the width and height of the parent div cannot be removed.

please help!

 

Try this: (bgcolor and width used for proof of concept)

...
<div class="fn-note" style="position:absolute;width:100%;background:#CCC;">
adfasdf
</div>
...

Applying the position:absolute; will essentially ignore the limitations of the parent element, however it may also ignore the position as well, in which case you will need to apply a position:relative to the parent block.

 

the class "fn-note" already has position: absolute and width:100%

 

That's where you got the problem.
Change to -

width: auto;

Code (markup):

This should attain what you want.

 

i put there width:auto, still not working
it takes the width of the parent div
if i give some fixed width say 500px, it takes it.
but i want that the child div take the width of the text within it

 

there are some difference from different browser.

 

That does not make any sense at all. Wrapping a div (auto width) into a div (fixed width)... You could give the "fixed width" div a min-width so it can "expand".

Maybe you could show an online example...

 

I agree. Why would I try to place a refrigerator box inside a shoe box? It just doesn't make any sense.

 

Agreed, I was going to suggest setting a min-width, there are some firefox only ones -moz-fit-content, -moz-max-content

lol whats going on here with the decimals??

 

im little late i know, but the question is still unaswered, so here it goes:

position: absolute
width: 100%
left: 0

 

If I had a pound for every decimal you used, I'd be a rich man. Why so much?​

 

Use a z-index like z-index:100; and this will how that div on top of the other div with both having absolute positioning. Give them both a z-index number and the one that you want on top should have the greater number. ;-)

Thanks
Maximus McCullough
Lead web developer at A1WebsitePro.com