Getting the Perfect Size...

Help!

[Gendari]

I have three elements, which I will post below. These elements help make the design for the news area of my site.

#main
{
background-color: yellow;
display: block;
position: absolute;
top: 153px;
left: 183px;
right: 33px;
padding: 12px 0 0 0;
height: 61%;
z-index: 196;
min-width: 270px;
}

/* MAIN is NEWSBORDER PARENT */
#newsborder
{
background-color: red;
text-align: center;
position: relative;
display: block;
top: 0px;
left: 0px;
height: 100%;
margin: 0 5% 0 5%;
overflow: visible;
z-index: 197;
}

---
The blank element that I have here is the one that I want to configue for the perfect size. I want it to be:

- As a Child of #newsborder
70px from the top and 8px from the left.

I also want it to be the width of #newsborder minus the adjustment to the left. Lastly, I want the height of #newsbackground to extend to the bottom of #newsborder minus the top adjustment as well as leaving 28px from the bottom-up.

#newsbackground
{
/* How do I go about doing this *?
}

[Gendari]

I decided to try this and it works wonderfully in FireFox. However, in IE it doesn't display anything, and I think that's because you have to have a width and height property. Anyway around this?

#newsbackground
{
background-color: blue;
position: absolute;
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
top: 70px;
bottom: 28px;
left: 8px;
right: 0px;
z-index: 2500;
}

[Gendari]

Seriously driving me nuts...

[Smad]

this would be my guess for you inner container, you cannot define top, left, right and bottom as far as i know. best is to define top and left and use margins to create space between your divs. min-width wont work with IE also.

#newsbackground
{
background-color: blue;
position: absolute;
padding: 0;
margin-bottom:28px;
display: block;
top: 70px;
left: 8px;
z-index: 2500;
}

[Gendari]

It didn't work :(

Anyone else got any suggestions...