div positioning incorrect

Question

as an excercise i decided to delve in to css layout styling and am already failing to see why my layout is not aligning correctly. also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement. i have done screengrab to show problem. can someone show my error. thanks

screen grab: http://imageshack.us/photo/my-images/21/containergrabnew.png/

css

#container  {

  width: 800px;
    margin: 0 auto;
  background-image: url(../images/container-bg.gif);
    background-position: center center;
  background-repeat: repeat-y;
}
#containerLeft {

  width: 475px;

    float:left;
  background-image: url(../images/container-left-bg.gif);
    background-position: center center;
  background-repeat: repeat-y;
}
#containerRight {

  width: 300px;

    float:right;
  background-image: url(../images/container-right-bg.gif);
    background-position: center center;
  background-repeat: repeat-y;
}

html

<div id="container">
    This is the container
    <div id="containerLeft">
      This is the left container

    <div id="containerRight">
      This is the right container
    </div></div>
  </div>

Answer 1

am already failing to see why my layout is not aligning correctly

Your HTML is not nested correctly. Change it to this:

<div id="container">
    <div id="containerLeft">
      This is the left container
    </div>

    <div id="containerRight">
      This is the right container
    </div>
</div>

also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement.

You need to clear your floated elements.

You can do this by adding overflow: hidden to #container.

You should read this article for more information: http://css-tricks.com/all-about-floats/

It discusses why this happens, various ways to fix it, and includes useful and relevant information about floats in general.