# Element Extension by Increments

**URL:** https://forum.kirupa.com/t/element-extension-by-increments/252608
**Category:** web dev
**Created:** [February 21, 2008, 5:36pm UTC](https://forum.kirupa.com/t/element-extension-by-increments/252608 "2008-02-21T17:36:47Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![gmerriment](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gmerriment/32/2521_2.png) [@gmerriment](https://forum.kirupa.com/u/gmerriment)
#### Post date: [February 21, 2008, 5:36pm UTC](https://forum.kirupa.com/t/element-extension-by-increments/252608/1 "2008-02-21T17:36:47Z")

</div>

Ordinarily in HTML when you have a \<div\> element (without sizing styles, so it is sized automatically) with a \<p\> element inside it, when the \<p\> element contains more content than the \<div\> can display, the \<div\> will resize to _just_ large enough to contain the \<p\>.

Suppose you want the \<div\> element to react to the \<p\> element having too much content by resizing itself by an increment instead? For example, you have one too many lines in your \<p\> so the \<div\> increases its height by 100px instead of whatever the line height of the \<p\> is. The primary usefulness for this would be background image formatting, in circumstances where the background image has to line up nicely with surrounding elements.

I imagine this would probably be accomplished best using javascript, but if there’s a neat CSS trick I’d love to hear it. Thanks a bunch!