Section styling

A few examples of how sections and their scope can be made more visible to users of graphical browsers through styling.

I prefer to not wrap the <h1> section in a wrapper, IMO it creates a cluttered look and doesn't communicate the section structure any better. Also the <h1> is frequently already styled by being part of a masthead.

In my experience this type of styling can work well when a depth of 3 - 4 nested sections are styled this way. Less and the emphasising doesn't provide much of a function, more leads to a cluttered look that detracts from the content, especially with the nested box examples.

The section emphasising effect works best if the start and end of the section border(s) are both visible in the viewport.

Markup

<div class="section">
   <h2>Nested coloured boxes</h2>
   <p>Section content.</p>
   <div class="section">
      <h3>Section heading</h3>
      <p>Section content.</p>
      <div class="section">
         <h4>Section heading</h4>
         <p>Section content.</p>
      </div>
   </div>
</div>
<div class="section">
   <h2>Section heading</h2>
   <p>Section content.</p>
</div>

CSS

Code

General

body{color:#000;background:#eee}

Gutter

.section h2,.section h3,.section h4{padding:1px 5px 2px 5px;background:#bfb;border:1px solid #696}
.section{padding-left:8px;border-left:1px solid #696}
.section h2,.section h3,.section h4{display:inline-block} /* For IE */
.section h2,.section h3,.section h4{display:inline} /* IE inline-block hack */
.section h2,.section h3,.section h4{display:table;margin:0} /* For CSS2 browsers */

Nested bordered boxes

.section h2,.section h3,.section h4{padding:1px 5px 2px 5px;background:#bbf;border:1px solid #669}
.section{margin-top:2em;margin-bottom:1em;padding:0 8px;border:1px solid #aaa}
.section h2,.section h3,.section h4{display:inline-block/* For IE */;margin:-.75em 0 10px 0}
.section h2,.section h3,.section h4{display:inline} /* IE inline-block hack */
.section h2,.section h3,.section h4{display:table} /* For CSS2 browsers */

Nested coloured boxes

.section h2,.section h3,.section h4{padding:1px 5px 2px 5px;background:#fa6}
.section{margin-top:2em;margin-bottom:1em;padding:0 8px;background:#ff6;border:1px solid transparent}
.section .section{background:#ff8}
.section .section .section{background:#ffb}
.section h2,.section h3,.section h4{display:inline-block/* For IE */;margin:-.75em 0 10px 0}
.section h2,.section h3,.section h4{display:inline} /* IE inline-block hack */
.section h2,.section h3,.section h4{display:table} /* For CSS2 browsers */

Documentation

The inline-block (for IE) and table (for CSS2 browsers) values for the CSS display property are used to ensure proper behaviour when the header content wraps.

Documentation on the IE block level element inline-block hack used in the examples.

Home