First wordpress theme - help required (css border confusion)

I started coding my first wordpress theme from scratch yesterday and have gotten this far (it is setup in a temporary directory until i finish).

http://dimmportal.com/wpdemos/

My problem is with the borders.
The "container" div id is the one which wraps ALL of my content (excluding the header, sidebar and footer) yeh?
Now I have styled the container with the following;

#container{
float: left;
width: 499px;
background: #FFFFFF;
border-left-style: solid;
border-left-color: black;
border-left-width: 1px;

Now I have given it the white background for now, so the tag is easily distinguishable.
As you can see, the border ends where the content ends, which is a little frustrating. Is there a way to make the border extend to the footer, just like the sidebar?
(I have applied a similar code to the sidebar div tag and it appears fine).

Does anyone know where my problem lies and how to fix it?
I can give further information if necessary, I am just a little bit stuck here.

Thanks in advance
Steven.

 

Make a dive that include sidebar and container.
Then make an image like this one and set it as background for the new div with repeat-y.

 

Where did you learn how to make your own theme? I've gone to several sites but they only show you how to make a theme based on their CHOICE. Don't really show you how to make a custom layout.

 

thanks for the help Sorel, seems to be a great idea, I just can't quite get it working....

I have now removed both of the 'border' style properties and created a div called 'color' which wraps around both the container and sidebar tags.

I have used the following code;

#color{
background: url('images/containerbg.jpg');
background-repeat: repeat-y;
}

Yet still no image appears.
Are there any obvious errors here, or is there another problem?
I'm thinking perhaps the image isn't displaying as it is hidden behind or something.

cheers
- Kuriaki, a good place to start is here.
You should be able to learn alot and then be able to tale things from there.
As you want to create more elements, just google them for details.

 

please, anybody?

 

So, I see that you have a div called "border".
But, in CSS if you have into a div another div with any float, the main div will not cover that with float.
So, you should have something like this:

<div id="border">
     <div id="container">
         ...
     </div>
     <div id="sidebar">
         ...
     </div>
     <div style="clear:both;"></div> /// !!!! This Line !!!! 
</div>

HTML:

So add "<div style="clear:both;"></div> in #border after sidebar.
Then you could give #border { background: #ffffff; }
or #border { background: url(images/img.jpg) repeat-y; } where img.jpg is that image we were talking about.

 

excellent, thanks that worked.

Now my problem is;
when I add widgets to the sidebar, the sidebar no longer fills to the bottom.
as you can see here;
http://dimmportal.com/wpdemos/

The sidebar has been styled using;
background: #d5d6d7 url('images/sidebar_background.gif');
to get the image.
Do I just need to use the repeat-x and repeat y again? If so, how?
If not, how else can it be fixed?

 

Change #border to this:

#border{
background: url('images/sidebar_background.gif') repeat-y right; 
border-left: solid 1px #000;
border-right: solid 1px #000;
}

HTML:

And .sidebar to this:

float:left;
width: 199px;
margin-right: 1px;
border-left-style: solid;
border-left-color: black;
border-left-width: 1px;

HTML:

Now it will work.