Div help needed please.

[twillis]

Hi,

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.

The menu will show on every page as well as a center div which will contain different content on each page.



I had everything fine when I specified a height for Content (about 700px), which worked for the home page (http://bowtree.org/new/index.php). But then when I got to the affiliatespage (http://bowtree.org/new/affiliatemembersmain.php) I realized that the text that would be inside the Center div exceeded the height of my Content div.

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.
Im really confused anyone be able to help me out please?

I would like it applied to this stylesheet if possible please:




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;
}



Thanks

[Ankou]

Honestly if I were you I'd recode the page an leave out all the postion: absolute; calls. You really don't need them for this type of layout.

Keep your container div to center the layout and to keep the width that you want.

1st div will be your header extending the width you want - it'll contain the green "Bow Tree Civic Association" part and images.

2nd div can be the gray box you have. You could actually not have this a div but rather a paragraph tag inside the 1st div if you wanted.

Now for the menu, content and rightbar.

Create a div for the menu and float that left. Set the width you want it to be.
Create a div that will hold the content and the right bar. Float that left as well.

Those two divs should take up the full width available. If your container div is 700px wide. Menu can be 170px wide and the other div can be 530px wide (widths are up to you).

Now for the pages that you want to have that rightbar on, you'll have to float the content left and the rightbar left. Again playing with the total width available (with the width examples I gave above you'd have 530px to work with). Before you close that containing div for these two make sure to clear the floats.

For the pages that don't require the rightbar, just place your content.

Place your footer and make sure to use clear: both; on that as well. That will clear the float for the menu and the div containing the content/rightbar divs.


You can do all that without the position absolute calls and allow for the whole site not to have to worry about setting any height for any divs.


Code may look something like so (very basic example):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title> </title>
<style type="text/css" media="screen">
body{ margin: 0 auto; padding: 0; text-align: center; font-family: Verdana, sans-serif; font-size: 62.5%; }
body{ margin: 0 auto; text-align: center; }
.clear{ clear: both; height: .1em; font-size: .1em; padding: 0; margin: 0; }
#container{ margin: 0 auto; text-align: left; width: 760px; }
#header{ background: #0f0; padding: 20px; }
#graybar{ background: #666; }
#menu{ float: left; width: 200px; background: #edc; }
#contents{ float: left; width: 560px; }
#footer{ clear: both; background: #cde; }
#text{ float: left; width: 400px; }
#rightbar{ float: left; width: 160px; background: #999; }
</style>

</head>
<body>

<div id="container">

<div id="header">Header</div>
<div id="graybar">Home</div>

<div id="menu">
Menu Items <br /><br />
Item 1 <br />
Item 2 <br />
Item 3 <br />
Item 4 <br />
Item 5 <br />
</div>

<div id="contents">

<div id="text">
Some text here
</div>

<div id="rightbar">
This is the right bar
</div>

<!-- Clear the text/rightbar floats -->
<div class="clear">&nbsp;</div>

</div>


<!-- Clear the menu/contents floats -->
<div class="clear">&nbsp;</div>

<div id="footer">Footer</div>

</div>
</body>
</html>



It would be about the same for the pages without the rightbar with the exception that you wouldn't need to have:



<div id="text">
Some text here
</div>

<div id="rightbar">
This is the right bar
</div>

<!-- Clear the text/rightbar floats -->
<div class="clear">&nbsp;</div>



You could just put the contents of the page inside the "contents" div.

[twillis]

Thanks sounds like a good plan. I'll have a look into that and reply if i have any problems

[twillis]

what about if i wanted to center the entire thing on any resolution? To center i main div do i use

margin: 0 auto;

[Ankou]

It should be centered for any resoultion already. Didn't it center when you tested it?

[twillis]

Yeah sorry it has now.

[Ankou]

No problem, I was just worried there for a second since I didn't have time to text the code in some browsers. Figured it was fine, but you can never be too safe. :)