Left marginal

In this short tip from Roman, we will see the simple but useful CSS Pattern called Left Marginal. It helps to position an item to the left of the main content and is handy when styling additional headers etc.

The code is quite short:

%h1 Main Header
%div.left-marginal
  %div.marginal-heading Left Heading
  Main Content<br>
  and more text

CSS:

.left-marginal {
  position: relative;
  margin-left: 100px;
}
.marginal-heading {
  position: absolute;
  left: -100px;
  top: 0;
  margin: 0;
  width: 90px;
}

This code puts Left Heading into the margin of the main content div. The idea is trivial, but tricky to guess, so, using it knowledgeably would improve the application style.

See the Pen jkGEC by Mose (@mose) on CodePen.

Left marginal for css positionning