CSS Border example : House

How did he do that? I looked at the code but all I see is #brickso-and-so. it looks like he defined everything in css up at the top and then just called it in the right order.

Each brick is defined with a separate id which is positioned absolutely.
This takes up a large amount of css and html.

I have a similar demo on my site
http://www.s7u.co.uk/ (home page)
which uses classes and floats to position each 'lego brick'.
This makes the css more compact.
It also has a :hover state just for fun.

Hi stu,
Nice house.
Your site would have to be one of the best CSS resources on the web.
It gets better each time I visit.

The one thing I would suggest is that you provide an explanation on how to do each of the examples. I know people can view the source but most people still won't know how you did it.

For example you could say at the bottom of the house something like:
This house was built with CSS. No images were used in the making of this house. Background-color and borders give the bricks color. Floats were used to position the elements.

Something along those lines, would make it easier for others to understand. Another thing you could do is comment the example in the markup so that when you look at the source its easy to see straight away where the example is.

Keep up the good work.

Thanks Tony,

I agree with all your comments and have been thinking along the same lines recently.

The site stated out last November with just a couple of examples but has grown so fast that I have not had time to 'stand back and take a look'.
The original idea was that competent css visitors would be able to understand the css and use it 'as is'. But from emails and comments that I get, I now know that this is not the case.

So my next step is probably to pad out each example with a 'how was it done' section.