Filler blocks -- how is this done?!

1

Hi,

I’m trying to figure out how to make filler blocks.

If you scroll to the bottom of this site, you’ll see that there are these cream colored blocks that fill up the white space at the end of the columns.

I can’t figure out how this is done.
Please help!

Thanks!

2

What your seeing is a background image that is scaled on the y axis. The top of the middle box is actually part the ‘blue box bottom’ image. The background is scaled 100% y-axis on the ‘content’ container to give it the effect. Here’s an example:

HTML:


<div class="container">
  <div class="left">block of left stuff</div>
  <div class="right">block of right stuff</div>
</div>

CSS:


.container {
  background: transparent url(bg_container.gif) repeat-y top left;
  display: block;
  height: 400px;
  width: 500px;
}

.left {
  background: #00f url(left_bottom.gif) no-repeat bottom left; /* this image also contains the 'top' of the cream colored box */
  display: block;
  float: left;
  height: 150px;
  width: 200px;
}

.right {
  background: #0c0 url(right_bottom.gif) no-repeat bottom left; /* this image also contains the 'top' of the cream colored box */
  display: block;
  float: left;
  height: 300px;
  margin-left: 50px;
  width: 250px;
}

If you need, attached is an example I made in about 8 minutes. Hope this helps you out! :thumb2:

3

GENIUS!
I’m gonna try it out in a bit.
Thanks so much!

4

No prob! If you need some help with it just let me know! :smiley: