Slicing and coding a re-sizable box

[biggieuk]

Hi all,

 

Im struggling to find the best way to slice and code this box in CSS?

 

 

I want to be able to change the width of the box, title, the little icon and the contents (chart).

 

Any guidance would be appreciated!

 

thanks

[haku]

That isn't really something that can be explained in one thread.

 

You basically just asked how to make a website from a .psd. There are many books that can tell you how to do this. Threads are more for clarifications of problems you are having, not learning from scratch.

[biggieuk]

Im not looking for this to be done for me, i am basically looking for advice on how to do this.

 

here is my current attempt:

 

 

the Red & blue slices are CSS fills with either a border-top or border-bottom.

 

My HTML is:

 

<div id="box1">
<div id="box1-topleft"></div><div id="box1-topmiddle"></div><div id="box1-topright"></div>
<div id="box1-left"></div><div id="box1-middle"></div><div id="box1-right"></div>						
</div>

 

I have floated topleft,topmiddle,topright to the left and thats looks fine. I cannot seem to get the bottom half to line up though.