Problem with custom image border (shadow)

Hi there, I've been trying to convert a static template I made way back to a fluid width and height template.
The only problem I've been having is with the border or "shadow" that I have surrounding the content.
The bottom works just fine, however the sides is what I'm having a problem with.
I can't get them to be the correct height.

Click here for an image.

I've tried with height:100%; but then I need to put that on all parent elements as well or set the shadows on the left and right to position:absolute;.
The problem then is that they become 100% of the view-port and not the parent element.

I don't really want to use tables, so please help. I hope there is a way around this.

I've included the code for the example, if it helps.

The XHTML is:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
 <meta http-equiv="Content-type" content="application/xhtml+xml; charset=UTF-8" />
 <title>Title should go here...</title>
 <link href='master.css' type='text/css' media='screen' charset='UTF-8' rel='stylesheet' />
</head>
<body id='News'>
 <div id='Container'>
 <div id='ShadowLeft'>&nbsp;</div>
 <div id='PageContent'>Content should go here...</div>
 <div id='ShadowRight'>&nbsp;</div>
 </div>
 <div id='ShadowBottomContainer'>
 <div id='ShadowBottomLeft'>&nbsp;</div>
 <div id='ShadowBottomCenter'>&nbsp;</div>
 <div id='ShadowBottomRight'>&nbsp;</div>
 </div>
</body>
</html>

And CSS:

@charset "UTF-8";

*
{
 margin:0;
 padding:0;
}

body
{
background-image:url(img/background.png);
font-family:sans-serif, cursive, serif, monospace;
color:#7A94AD;
}

#Container
{
 clear:both;
}

#ShadowLeft
{
 float:left;
 width:10%;
 background-image:url(img/shadowleft.png);
 background-repeat:repeat-y;
 background-position:top right;
}

#PageContent
{
 float:left;
 width:80%;
 margin:0 auto;
 height:32px;
 background-color:#FFFFFF;
}

#ShadowRight
{
 float:left;
 width:10%;
 background-image:url(img/shadowright.png);
 background-repeat:repeat-y;
 background-position:top left;
}

#ShadowBottomContainer
{
 clear:both;
}

#ShadowBottomLeft
{
 float:left;
 width:10%;
 height:11px;
 background-image:url(img/shadowbottomleft.png);
 background-repeat:no-repeat;
 background-position:top right;
}

#ShadowBottomCenter
{
 float:left;
 width:80%;
 height:11px;
 background-image:url(img/shadowbottomcenter.png);
 background-repeat:repeat-x;
 background-position:top left;
}

#ShadowBottomRight
{
 float:left;
 width:10%;
 height:11px;
 background-image:url(img/shadowbottomright.png);
 background-repeat:no-repeat;
 background-position:top left;
}

[edited by: bill at 7:41 am (utc) on Mar 18, 2010]
[edit reason] No links to examples please [/edit]

<div id="container"> 
<div id="outer-container-with-shadow-left">
<div id="inner-container-with-shadow-right">
<div id="PageContent-so-you-can-pad-it">
Content should go here...
</div>
</div> 
<div class="clearing-div"></div>

<div id="ShadowBottomContainer"><div id="ShadowBottomLeft"></div><div id="ShadowBottomRight"></div></div>
</div> 
</div>

Problem with custom image border (shadow)

TheJAG

rocknbil

TheJAG

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week