[font=Arial]Hi,[/font]
[font=Arial]I could really do with some help on this please. Basically i have one large div, Content, that contains the others. Content is the main layout…containing a border and background color and centered etc…The other main ones are menubox(left) center (center) and rightbar.[/font]
[font=Arial]The menu will show on every page as well as a center div which will contain different content on each page.
[/font]
[font=Arial]I had everything fine when I specified a height for Content (about 700px), which worked for the home page . But then when I got to the [url=“http://bowtree.org/new/affiliatemembersmain.php”]affiliatespage I realized that the text that would be inside the Center div exceeded the height of my Content div.
[/font]
[font=Arial]I talked to a friend who recommending making the height auto. That then caused the border to move up to the header image only (odd). So basically I am looking for the Content (layout) div to expand and contract based on how long the divs inside it are. I know it can be done, but haven’t been able to find it explained clearly.[/font]
[font=Arial]Im really confused anyone be able to help me out please?[/font]
[font=Arial]I would like it applied to this stylesheet if possible please:[/font]
html { margin: 0px; padding: 0px; }
body {
position: relative;
margin:25px 0px;
padding:0px;
text-align:center;
}
#content {
position:relative;
width:auto;
height: auto;
margin:10px auto;
border:2px solid #006633;
background-color:#eee;
text-align:left;
}
* html #content{width:800px;voice-family: "\"}\""; voice-family:inherit;}/* for ie5*/
* html #content{width:800px;voice-family: "\"}\""; voice-family:inherit;}
a.menu:link { color: #006633; text-decoration: none; }
a.menu:visited { color: #006633; text-decoration: none; }
a.menu:hover { color: FCE100; text-decoration: none; }
.menubox{
position:absolute;
left:2px;
top:150px;
width:215px;
height:800px;
}
.menu {
color: #006633;
font-size: x-small;
font-family: Georgia, Times New Roman, Times, serif;
font-weight: bold;
padding-left: 8 px;
}
#menuhead {
text-decoration: underline;
color: #006633;
font-size: x-small;
font-family: Georgia, Times New Roman, Times, serif;
font-weight: bold;
padding-left: 5 px;
}
.center{
position:absolute;
left:225px;
top:175px;
width:300px;
height:500px;
}
a.graybox:link { color: #FFFFFF; text-decoration: none; }
a.graybox:visited { color: #FFFFFF; text-decoration: none; }
a.graybox:hover { color: #FFFFFF; text-decoration: none; }
.graybox {
position: absolute;
top: 80px;
font-size: x-small;
font-family: arial;
background-color: gray;
width: 800px;
}
.rightbar {
text-align:center;
position:absolute;
right:2px;
top:175px;
border-left:1px solid #006633;
width:150px;
height:685px;
}
#quicktitle{font-weight: bold;}
a.quicklinks:link { color: #006633;}
a.quicklinks:visited { color: #006633;}
a.quicklinks:hover { color: #006633;}
.quicklinks {
text-decoration: underline;
font-size: x-small;
color: #006633;
font-family: arial;
}
#hrq{color:#006633; ; height: 1px;}
#hrq3{
position: absolute;
top: 605;
right: 0;
color:#006633;
height: 1px;}
a.f:link { color: #FFFFFF;}
a.f:visited { color: #FFFFFF;}
a.f:hover { color: #FFFFFF; text-decoration: none}
td {text-align: center;}
#search{
position: absolute;
top: 615;
right: 10;
text-align:center;}
.footer {
position:absolute;
text-align: center;
color: #FFFFFF;
font-size: x-small;
font-family: arial;
background-color: #006633;
width: 800px;
top: 875px;
}
/* ----END Index----*/
a.return:link {color: #006633; text-decoration: none;}
a.return:visited {color: #006633; text-decoration: none;}
a.return:hover {color: #006633; text-decoration: none;}
.centerit {text-align: center;}
a.mainli:link {color: #006633;}
a.mainli:visited {color: #006633;}
a.mainli:hover {color: #006633;}
.main{
position:absolute;
left:225px;
top:175px;
width:568px;
height:500px;
}
h2, h3 {
text-align: center;
text-decoration: underline;
color: #006633;
font-family: arial;
}
[font=Arial]Thanks[/font]
