help with container being 100% with the content

aebstract · January 7, 2007

I have a website that I am working on and I need to get it so that when the content exceeds the length of the nav, the container of the entire site has a background color the same as the content. Right now the content is going really long for some reason, I just want it all to flatten out at the same spot. I'll post the index and css files and hopefully someone can get me some help quickly.

index.php
[code]<?php
$menu = $_GET['menu'];

if (isset($menu)) {
include ("$menu.php");
} else {
include ("home.php");
}

?>
<html>
<head>
<title>Mark's coins & jewlery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="misc/stylesheet.css" rel="stylesheet" type=text/css title=default />
</head>
<body>
<div id="container">

<div id="left">
<div id="flashbg">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="206" height="171">
<param name="movie" value="misc/movie.swf">
<param name="quality" value="high">
<embed src="misc/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="206" height="171"></embed>
</object>
</div>
</div>
<div id="nav"><br />
<img src="misc/ladiesjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lrings">Ladies Rings</a> </li>
<li><a href="index.php?menu=lnecks">Ladies Necklaces</a> </li>
<li><a href="index.php?menu=lwatches">Ladies Watches</a> </li>
<li><a href="index.php?menu=lbpp">Ladies Brooches, Pins & Pendents</a>
</li>
<li><a href="index.php?menu=lbracelets">Ladies Bracelets</a> </li>
<li><a href="index.php?menu=purses">Purses</a> </li>
</ul>
</div>
<img src="misc/mensjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=mrings">Mens Rings</a> </li>
<li><a href="index.php?menu=mchains">Mens Chains</a> </li>
<li><a href="index.php?menu=mbracelets">Mens Bracelets</a> </li>
<li><a href="index.php?menu=mwatches">Mens Watches</a> </li>
<li><a href="index.php?menu=mpendents">Mens Pendents</a> </li>
</ul>
</div>
<img src="misc/coins.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=goldeagles">Gold Eagles</a> </li>
<li><a href="index.php?menu=silvereagles">Silver Eagles</a> </li>
<li><a href="index.php?menu=morgandollars">Morgan Dollars</a> </li>
<li><a href="index.php?menu=peacedollars">Peace Dollars</a> </li>
<li><a href="index.php?menu=othercoins">Other Coins</a> </li>
</ul>
</div>
<img src="misc/crystalandcollectible.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lalique">Lalique</a> </li>
<li><a href="index.php?menu=versace">Versace</a> </li>
<li><a href="index.php?menu=antique">Antique</a> </li>
</ul>
</div>
</div>
</div>

<div id="right">
<div id="logo">
<center>
<img src="misc/logo.jpg" />
</center>
</div>

<div id="redbar"> </div>

<div id="content">
<?php
echo "$content";
?>
</div>
</div>
</div>
</body>
</html>
[/code]

stylesheet
[code]html {
height: 100%;
}

body {
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;

}

#container {
background-color: #FBFBFB;
height: 100%;
width: 648px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

html #container {
height: 100%;
}

#left {
float: left;
width: 223px;
height: 100%;
background-color: #FBFBFB;
}

#flashbg {
position: relative; left: 0px; top: 0px;
width: 223px;
height: 190px;
background-image: url(flashbg.jpg);
}

#flash {
position: absolute; left: 7px; top: 7px;
width: 206px;
height: 171px;
}

#nav {
position: relative; left: 0px; top: 0px;
width: 223px;
background-image: url(navbg.jpg);

}

#right {
float: right;
width: 425px;

}

#logo {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 59px;
background-color: #000000;
}

#redbar {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 31px;
background-color: #9b0505;
}

#content {
position: relative; left: 0px; top: 0px;
height: 100%;
width: 425px;
background-color: #FBFBFB;
}

nav2 {
width: 150px;
padding: 0 0 1em 0;
margin-bottom: 1em;
}

ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
#nav2 li a {
display: block;
color: #000;
text-decoration: none;
width: 90%;
}
#nav2 li a:hover {

background-color: #2586d7;
color: #fff;
}[/code]

Thanks

http://ween.net/markscoinsandjewlery/

edit!
Take a look at the home page that you get sent to upon going to the website, the content goes past the background of the content section. Please help!

ToonMariner · January 8, 2007

Sorry but I don't understand what you are saying...

What does flatten out at the same spot mean? I have other questions on 'What does that mean' but for now could you re-phrase some of you post so that an idiot like me could understand it please.

Sign In

help with container being 100% with the content

Recommended Posts

aebstract

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information