Setting the vertical height of a box

[robives]

I am trying to set up a site using web standards having spent years using table based design.
How can I set the bodymenu on this page so that the vertical height matches the height of the mainbody to its left. Also, is it possible to set the width of the bodymenu box so that it fills to the right without having to specify a numerical value.

Thanks in advance

[deronsizemore]

I'm getting a page not found error

[robives]

oops - fixed the link now
page here

While I'm on can I add another question. How can I set the container to float in the centre of the window?

[Siebird]

While I'm on can I add another question. How can I set the container to float in the centre of the window?

You can center you layout by using this:

#container {
	width: 750px;
        margin: 0 auto;
	height: auto;
	text-align: left;
}

Then what your looking for on the right is called Faux Column, take a look at the article

[deronsizemore]

Hi,

If I understand what you need correctly, you're just wanting the gray background of the bodymenu to expand down to match the height of the of the content on the left? A background image is the easiest method there. What you want is called "Faux Columns". If you google search for that term, you'll see how it's done. I don't have time to create the image and stuff right now but if you still have trouble I can help later.

If you want to whole site to be centered, you can check out this link by Paul:
http://www.sitepoint.com/forums/show...67&postcount=4

EDIT: To late. Asiewe61 beat me to it.

[robives]

Thanks for your help - have the page centred but can't get the faux columns to work. I have added a background image but the right hand column is still not going down the page.

[Siebird]

You need something to push the "faux column" down. You need to create another div for the boxes:

#mainbody {
        position: relative;
        width: auto;
        height: auto;
	background-image: url(../images/horizontalgradient.jpg) repeat-y top right;
}
 
#boxes {
	background-image: url(../images/backgroundgradient.jpg);
	background-repeat: repeat-x;
	float: left;
}
#bodymenu {
	background-color: #eee;
	float: right;
	width: 153px;
}

No surround your box div:

<div id="mainbody">
  <div id="boxes">
  <div class="pageblock">
  	<p>box</p>
  </div> <!-- end of page block -->
  <div class="pageblock">
  	<p>Box 2</p>
  </div> <!-- end of page block -->
 
  <br clear="left">
  <div class="pageblock">
  	<p>box 3</p>
  </div> <!-- end of page block -->
  <div class="pageblock">
  <p>box 4</p>
  </div> <!-- end of page block -->
 
  <br clear="left">
</div> <!-- End of boxes -->
 
<div id="bodymenu">
	bodymenu
</div> <!-- End of body menu -->
</div> <!-- End of mainbody -->

I believe this is correct without checking it, but its a good start for ya

[richtestani]

clear your float, also float the bodymenu to the right.

#footer {
clear:both;
}