Height Property Issue

socoolbrewster · November 26th, 2006, 08:10 AM

I'm in the process of developing a website whereby I want to have a wrapper DIV around the main content with a border.

The problem I have is unless I state the height property with a given pixel value, the border doesnt appear. My aim is to make the wrapper height span the entire page. Is this possible? and why wont height:100% work?

Or do I need to create a background image to achieve the desired effect of a 100% spanning boder?

CSS
====

Code:

body {
    text-align:center;
    margin:0;
    font-size:100%; 
    font-family: "Lucida Grande", Arial, sans-serif; color:#999;
    }

#wrapper {
        width:780px;
        height:900px;
        margin: 0 auto;
        text-align:left;
        padding:0 7px;
        border-right: 2px solid #f60;
        border-left: 2px solid #f60;
        }

a { color:#69C; }
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; color:#f60; }
a:active {text-decoration:none; }

a#pageon { text-decoration:underline; color:#f60; }


/* Start of branding section  */

#sitelogo { float:left; width:250px; }
#sitelogo img { margin-bottom:10px; }
#cartlinks { font-size:0.9em; float:right; text-align:right; color:#69C; width:400px; }
div#cartlinks img { vertical-align:middle; padding:0px 4px; }

HTML
====

Code:

<div id="wrapper">



<div id="sitelogo"></a><a href="index.html" title="Vivanco Direct logo click to return to home page" ><img src="vivanco_direct_logo.gif" border="0" alt="Vivanco-Direct logo click to return to home page" /></a></div>
<div id="cartlinks"><img src="orange_cart_icon.gif" alt="shopping cart icon" />
<script language="JavaScript">
<!--
document.write("NETQUOTEVAR:CARTCOOKIEITEMS&nbsp;" + getCartItem(3)+"&nbsp;");
document.write("NETQUOTEVAR:CARTCOOKIEVALUE&nbsp;" + getCartItem(1));
// -->
</script>
<img src="orange_spacer.gif" alt="" /><a accesskey="1" href="http://www.testmole.co.uk/cgi-bin/ca000001.pl?ACTION=SHOWCART&ACTINIC_REFERRER=http://www.testmole.co.uk/acatalog/" title="Vivanco-Direct View Cart link">View Cart</a><img src="orange_spacer.gif" alt="" /><a href="http://www.testmole.co.uk/cgi-bin/os000001.pl?ACTION=Start" accesskey="2" title="Vivanco-Direct Checkout link">Checkout</a></div>

</div>

I would VERY welcome someones advise

Gaz

meow · November 26th, 2006, 08:31 AM

Quote:

quote:The problem I have is unless I state the height property with a given pixel value, the border doesnt appear

.
Yes it does. A DIV isn't heigher than its content. In your case the DIV and its borders won't be higher than the images.

Quote:

quote:My aim is to make the wrapper height span the entire page. Is this possible? and why wont height:100% work?

It can work. Read the following page. Alas ppk removed stuff when he revamped the site. Now, why did he do that? A lot of the old pages were extremely useful. Here is the page at archive.org.
http://web.archive.org/web/200604270...ercheight.html
(I think the forum will break that link. If it does, you have to paste it together again.)

Quote:

quote:Or do I need to create a background image to achieve the desired effect of a 100% spanning boder?

That's an often used method.

--
http://yupapa.com