Vertical Responsiveness

For a recent project (Author POP™ dashboard), a navigation menu needed to be placed on the left of the main content.

Common stuff, right?

Nope. Not this one.

Decidedly uncommon.

• The div containing the navigation menu is within the div of the main content with a left margin of a tenth of an inch.

• The background of the menu div is different than the background of the content div.

• The menu div must be the height of the content div — minus a tenth of an inch top and left margin.

Because of the background differences, the menu div length must be correct. (With the same background color, the menu div length wouldn't be visible.)

And, yes, the height of the content div does vary from page to page. It will, however, always be at least the minimum height of the menu div.

I'll describe how to do it. But first, a demonstration.

To illustrate vertical responsiveness, editing is enabled for the main content. Click the beige-colored div and type stuff. Watch the black background div adjust its height as the main content div's height changes.

Note: Edit only the content with the beige background in this vertical responsiveness demonstration. Editing the black-background content (if your browser allows it) will result in weird things happening. You, of course, won't enable editing of your content in a live implementation.

How to Do It

Source code derived from the demonstration is used to describe how to do it. It makes a div responsive to the height of the div within which it exists.

The CSS rules in the source code are colored to indicate their degree of necessity for the functionality.

• The red-colored CSS rules are required for the functionality. They may be changed only as noted.

• The blue-colored CSS rules are essential to simulate the original project design for a satisfactory demonstration. They may be changed or removed.

• The black-colored CSS rules are present for the design of the demonstration. They may be changed, removed, or replaced with different CSS rules.

<div 
   style="position:relative; /* Required as is. */
          padding-left:1.3in; /* Value may be changed. */
          padding-top:.1in;
          padding-right:3px;
          padding-bottom:.1in;
          border:1px solid #999; 
          border-radius:5xp; 
          min-height:1in; 
          background-color:ivory;">
   <div 
      style="position:absolute; /* Required as is. */
             top:.1in;    /* Value may be changed. */
             bottom:.1in; /* Value may be changed. */
             left:.1in; 
             background-color:black; 
             width:1in; 
             border-radius:9px; 
             text-align:center; 
             padding:3px; 
             color:white; 
             font-size:.9em; 
             font-weight:bold;">
   [NAV MENU]
   </div>
[MAIN CONTENT]
</div>

Notes:

• There are two divs:

1. The main content div.
2. The navigation menu div within the main content div.

• The main content div.

The position:relative; rule is required to be what it is. Its presence lets the navigation div be positioned within this content div.

The padding-left:1.3in; rule needs to be present to push the main content in from the left — so it won't print on top of or under the navigation div content. The value of the padding may be changed.

The rest of the CSS rules may be changed, removed, or replaced with different CSS rules according to your implementation and design requirements.

• The navigation menu div.

The position:absolute; rule is required to be what it is. It's declaration lets the navigation div be positioned within the main content div the way it needs to be.

The top:.1in; rule positions the top edge of the menu div within a tenth of an inch from the top edge of the content div. The rule is required. The value may be changed, including the number 0 to pull the top of the nav div all the way up to the top of the content div.

The bottom:.1in; rule positions the bottom edge of the menu div within a tenth of an inch from the bottom edge of the content div. The rule is required. The value may be changed, including the number 0 to pull the bottom of the nav div all the way down to the bottom of the content div.

The left:.1in; rule simulates the original project design by pushing the left edge of the nav div a tenth of an inch from the left edge of the content div. The rule may be changed or removed.

The background-color:black; rule simulates the original project design by giving the nav div a background color. The rule may be changed or removed.

The rest of the CSS rules may be changed, removed, or replaced with different CSS rules according to your implementation and design requirements.

With that base, go ahead and try various CSS rules until your preferred design is accomplished.

As noted earlier, the CSS rules colored red are essential for the navigation div to be responsive to the height of the main content div. With those in place, your own vertical responsive divs can be built.

(This article first appeared in Possibilities ezine.)

Will Bontrager