# Filler blocks -- how is this done?!

**URL:** <https://forum.kirupa.com/t/filler-blocks-how-is-this-done/264795>\
**Category:** Uncategorized\
**Created:** [June 30, 2008, 4:39pm UTC](https://forum.kirupa.com/t/filler-blocks-how-is-this-done/264795 "2008-06-30T16:39:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![monkeygirl](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@monkeygirl](https://forum.kirupa.com/u/monkeygirl)\
**Post date:** [June 30, 2008, 4:39pm UTC](https://forum.kirupa.com/t/filler-blocks-how-is-this-done/264795/1 "2008-06-30T16:39:08Z")

</div>

Hi,

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

> **[WebMD - Better information. Better health.](https://www.webmd.com/default.htm)**
>
> The leading source for trustworthy and timely health and medical news and information. Providing credible health information, supportive community, and educational services by blending award-winning expertise in content, community services, expert...

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!

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 30, 2008, 5:16pm UTC](https://forum.kirupa.com/t/filler-blocks-how-is-this-done/264795/2 "2008-06-30T17:16:25Z")

</div>

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:

```auto

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

```

CSS:

```auto

.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:

---

<div class="post-metadata">

**Author:** ![monkeygirl](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@monkeygirl](https://forum.kirupa.com/u/monkeygirl)\
**Post date:** [June 30, 2008, 6:11pm UTC](https://forum.kirupa.com/t/filler-blocks-how-is-this-done/264795/3 "2008-06-30T18:11:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 30, 2008, 6:34pm UTC](https://forum.kirupa.com/t/filler-blocks-how-is-this-done/264795/4 "2008-06-30T18:34:58Z")

</div>

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