No replies
stevil
stevil's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+10
Joined: 2010-06-11
Posts: 1
Points: 2

Hi All,

Basically what I'm trying to do is get a div inside another div, the containing divs width and height are variable (stretches with the page width / height) and the 2nd div which is being contained I want to stretch out depending on the size of the containing div but have certain spacing around the outside of it.

So lets say the containing div is set to 80% of the document width and height which for example sake we'll say works out to be 1000px * 1000px, now I want to put a div inside this div which has 100px space at the top, 40px at the bottom, and 20px either side. So the center divs Co-ords would be 20, 100 - 980, 960

What I've tried doing is

<div style="position:relative;width:80%;height:80%;background-color:red;padding:100px 20px 40px 20px">
     <div style="width:100%;height:100%;background-color:blue"></div>
</div>

This gives the desired effect, but the padding on the containing div makes it pushes the sizes out to be bigger than I want. If I change that to have a margin on div that is being contained, the size of the contained div is still 100% of div it's inside, so it'll position correctly, but the size will be all wrong.

I hope I'm explaining this correctly =) I guess basically trying to do the padding inside a div rather than outside, but explained in a long complex way Wink

Thanks for any help anyone can offer =D