Skip to content Skip to navigation

Postcard Layouts

Postcard layouts are micro-layouts that are useful for placing things side-by-side.

We wanted to create support for and develop an implementation strategy for what we are calling "postcard" layouts. A postcard layout is when you want things to float side-by-side as you see below in the examples. To implement a postcard layout, all you need is the correct code structure of two divs nested inside a wrapper div that has the postcard style class added:

<div class="postcard-left">
   <div>left</div>
   <div>right</div>
</div>

Below are four examples showing the postcard styles you can use, .postcard-left, .postcard-left-wrap, .postcard-right, and .postcard-right-wrap.

postcard-left diagram

waterfall

.postcard-left floats two divs side-by-side, and does not allow wrapping. You can use this to do "image on the left, text on the right" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

waterfall

.postcard-right floats two divs side-by-side, and does not allow wrapping. You can use this to do "image on the right, text on the left" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

waterfall

.postcard-left-wrap floats two divs side-by-side, and allows for wrapping. You can use this to do "image on the left, text on the right" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.

waterfall

.postcard-right-wrap floats two divs side-by-side, and allows for wrapping. You can use this to do "image on the right, text on the left" layouts. Postcard layouts are micro-layouts where you want thumbnail images, or other elements next to a block of text. We have built support for micro-layouts into the Open Framework theme through this postcard implementation strategy.