Float

St Mary's Church, Abbeytown

St Mary's Church, Abbeytown, is located in the village of Abbeytown, Cumbria, England. It is an active Anglican parish church in the deanery of Solway, the archdeaconry of West Cumberland, and the diocese of Carlisle. Its benefice is united with those of six local churches to form the Solway Plain Team Ministry. The church has been designated by English Heritage as a Grade I listed building.

Hugh Capet

Hugh Capet (c. 939 – 24 October 996), called in contemporary sources "Hugh the Great" (Latin: Hugo Magnus), was the first King of the Franks of the eponymous Capetian dynasty from his election to succeed the Carolingian Louis V in 987 until his death.

French Revolution

The French Revolution (French: Révolution française; 1789–1799), was a period of radical social and political upheaval in France that had a major impact on France and throughout the rest of Europe. The absolute monarchy that had ruled France for centuries collapsed in three years.

HTML

  • <div class="floatBox">
  • ...
  • </div>
  • <div class="floatBox">
  • ...
  • </div>
  • <div class="floatBox last">
  • ...
  • </div>
The underlying markup.

CSS

  • .floatBox {
  • float: left;
  • margin: 0 20px 0 0;
  • width: 230px;
  • }
  • .last {
  • margin: 0
  • }
The CSS that controls the layout.

How it works

Three are three <div class="floatBox"> elements that have a CSS rule applied (float: left;) that allows them to sit side-by-side (they are coloured in blue just so as you can see the element's limits). The addition of a width rule allows us to limit how much space they take up, allowing the float rule to do its work. The addition of another class called last (added only to the last column) means we can override the right margin of <div class="floatBox"> with zero for the last one in the row. This allows us to use all the available space more effectively. Getting objects right up against their parent's walls.

Note: This demo won't work very well on a narrow screen device. Use a desktop browser to get a feel for the real effect.