<div style="width:500px;height:500px;><div style="width: 500px">this div needs to be as high as the first div, what code to i add to do that i have tried "width:100%"</div></div>
Hi Natdizzle, you shouldn't
Hi Natdizzle,
you shouldn't need anything on the inner div for it's width to fill the available space, unless you have changed the display property or floated it.
the height
okay right, now what about the height of the inner div? say the outer div gets changed to
<div style="min-height: 500px;">
then content fills up that div so it stretches to 750px height, then the inner div needs to match that height, but sinc e the content filled it up we have no idea what the exact height will be every time. i tried height:100%, height:inherit, margin:auto
i'm not really following. Is
i'm not really following. Is there a problem with not knowing the actual height?
Have you looked at overflow
well i was looking for a way to have the inside div
automaticly scroll or resize to the outside divs height as it expands but i might have to just set a background image behind the inside div instead of the inside div itself so the image will repeat verticly th e size of the outside div unless i can figure out a wway to have the inside div expand verticly with the outside div
you know what i did
since i needed a background image on the inside div to tile verticly as high as the outsive div, i just put the background imag e on th e outside div instead
forgot to mention it was a floating div
otherwise i think thats right
let the content inside work
Usually, heights are never given unless specifically needed. The content over the web is suppose to expand, so let the content do the job, IF your inner div has content, if it expands the outer div too. Why would the outer div will increase its height on its own, unless you CSSify it or it has content inside.
But still if you need specific height,
divouter - height fixed divinner - 100%
Logic should work.
<div style="height:500px; width:500px; background:red; padding:10px"> <div style="height:100%; background:green"></div> </div>