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
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.
.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.
.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.
.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.